Why are images appearing blurry on my Webflow site after publishing, despite being reuploaded at a high resolution?
TL;DR
- Upload images at 2x their display size and avoid scaling up in Webflow to preserve quality.
- Use SVGs for vectors, PNGs for sharp UI, and WebP where supported, and consider background images or CMS uploads to bypass Webflow's compression.
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.
3. Use the Correct Image Format
- 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.