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 resolution, ensure container sizes match display dimensions, and avoid scaling up small images.
- Use background images or SVGs for quality, disable responsive optimization if needed, and optimize images before uploading.
Blurry images in Webflow typically happen when the published site is serving lower-resolution images than intended. This can result from automatic compression, incorrect image sizing, or display size mismatches.
1. Use Proper Image Dimensions
- Upload images at 2x resolution for retina screens. For example, if your image appears 500px wide on screen, the uploaded file should be 1000px wide.
- Avoid uploading small images and scaling them up in Webflow.
2. Set Correct Image Display Size
- Ensure that the image’s container width in Webflow matches the actual display size of the image on the published site.
- Check for any image being stretched in CSS—if an image is stretched beyond its original pixel dimensions, it will look blurry.
3. Disable Responsive Image Optimization (if necessary)
- Webflow automatically generates multiple sizes of images for responsive loading. Sometimes, especially in custom layouts, Webflow may choose the wrong size variant.
- To disable this:
- Convert the image to a background image in a
divinstead of using an inline<img>. - Background images do not undergo responsive optimization and retain full resolution.
4. Use SVGs for Icons and Graphics
- For logos or icons, use SVG files instead of PNG or JPEG. SVGs are vector-based and always render sharply at any size.
5. Optimize Manual Compression Settings
- Use external tools like TinyPNG or ImageOptim before uploading to retain quality with minimal file size.
- Avoid over-compressing images before upload.
6. Check Hi-DPI Settings in Assets
- Webflow detects and scales images for high-DPI screens. Check if your image is marked for 2x display in the asset settings (shown for certain Webflow components like lightboxes).
7. Clear Cache and Confirm on Live Site
- After republishing, clear your browser cache or use incognito mode to verify the fix.
- Sometimes, Webflow's CDN may still be serving an old image variant temporarily.
Summary
To fix blurry images on a published Webflow site, use 2x image resolution, avoid stretching smaller images, and consider using background images or SVGs where quality is critical. Adjust container scaling and disable responsive image optimization when necessary.