Blurry images on your published Webflow site usually result from image compression, incorrect sizing, or retina display mismatches—even if uploaded at high resolution.
1. Check Image Display Size vs. Upload Size
- Ensure your image is at least 2x the display dimensions on retina screens. For example, if your image displays at 500×300 pixels, upload it at 1000×600 pixels to maintain sharpness.
- Be cautious of scaling images up using Webflow’s designer—stretching smaller images degrades quality.
2. Disable Webflow’s Automatic Image Compression (When Needed)
- Webflow optimizes images for performance, which can reduce clarity.
- For critical visuals (like logos or UI elements), use SVGs instead of raster formats to retain clarity at all sizes.
- To disable compression for JPG or PNG, upload assets using CMS or as background images via CSS, which bypasses some compression logic.
- Use SVG for vector graphics (logos, icons).
- Use PNG for sharp UI images that require transparency or minimal compression.
- Use WebP for modern, efficient compression with minimal quality loss—Webflow handles this automatically where supported.
4. Confirm Lazy Loading Behavior
- Ensure images aren't loading blurry thumbnails while waiting for full resolution. By default, Webflow uses loading="lazy" for performance.
- Wait for full load or check in dev tools that the final image has a correct resolution.
5. Check for Sizing via CSS
- Inline or class-based CSS may be scaling down your image or applying effects like blurring.
- Inspect the image in the browser’s dev tools to verify the rendered size and applied styles.
6. Re-upload Image Outside Image Elements
- Try placing the image as a background image on a div block, which can maintain full resolution more reliably and bypass compression in some cases.
7. Asset Panel vs. CMS Upload
- Uploading the same image via Webflow’s Asset panel and CMS image field can result in different compression.
- For custom control, try serving certain images from an external CDN.
Summary
To fix blurry images, make sure you’re uploading at 2x resolution, use SVGs or PNGs as needed, and avoid scaling images up in Webflow. Also, consider background images and CMS uploads to bypass automatic compression when necessary.