How can I fix the issue of blurry images on my Webflow website that are fine in the designer but blurry when published?
TL;DR
- Upload images at 2x display size, avoid stretching or upsizing in Webflow.
- Use proper compression (high-quality PNG, WebP), avoid CMS thumbnails, and ensure images aren't used as low-res backgrounds.
- Leverage responsive image settings and double-resolution exports for Retina screens.
Blurry images on your Webflow website after publishing usually result from incorrect image sizing, compression, or display scaling outside native resolution. Here's how to fix it.
1. Use Correct Image Dimensions
- Upload images at 2x the display size (for high-DPI screens like Retina).
- For example, if an image is displayed at 400×300 px, upload it at 800×600 px.
- Avoid upsizing small images in Webflow — this causes blur.
2. Set Display Width Correctly
- Ensure the image element is not stretched beyond its original resolution.
- Use 100% width, auto height, and container constraints to preserve clarity.
- Use Webflow's Size panel to verify actual dimensions.
3. Check Image Compression Settings
- Webflow auto-compresses images on CDN delivery.
- If using JPG, ensure high quality before upload.
- For best results:
- Use PNG for graphics/logos.
- Use WebP where possible for lossy compression with sharpness.
- Export images at high quality in your image editor before upload.
4. Avoid Using Thumbnails or CMS Thumbnails
- Webflow may generate lower-res versions for image previews or collection lists.
- Instead:
- Use custom fields with full-size images.
- Avoid using Auto-generated thumbnails unless optimized.
5. Use Responsive Image Settings
- Webflow provides responsive images automatically for inline images.
- But these do not apply to:
- Background images
- CMS-bound image backgrounds
- Images within CSS
- In those cases:
- Use inline elements instead of background images for better resolution.
- Or upload higher-res background images manually.
6. Check Retina Display Scaling
- On high-DPI (Retina) screens, images may look blurry if not 2x scaled.
- Always upload at double pixel density when targeting retina.
- Test your site on physical devices or browser zoom = 100%.
Summary
To fix blurry images in Webflow: upload images at 2x size, avoid stretching images, use high-quality exports, and minimize use of thumbnails or background images when clarity matters. Webflow's Designer preview may show original quality, but published versions rely on proper exports and responsive image behavior.