Why do my hero images on my live Webflow site appear heavily compressed and blurry even though they look great in the Webflow Designer?
TL;DR
- Disable Webflow's responsive image resizing in the Settings panel.
- Upload high-resolution images (2x the displayed size) in WebP or PNG format.
- Export images with JPEG (80%+ quality) or PNG/WebP to maintain clarity.
- Set Lazy Load to “Eager” for background images to prevent blurriness.
- Adjust background size settings (Cover/Contain) to avoid scaling issues.
- Ensure images aren’t downscaled on Retina/high-DPI screens by adjusting CSS max-width settings.
Hero images on a live Webflow site might appear compressed or blurry due to Webflow's automatic image optimization, incorrect export settings, or browser scaling issues. Here’s how to troubleshoot and fix the issue:
1. Check Webflow’s Responsive Image Optimization
- Webflow automatically generates and serves responsive image versions to improve loading speed.
- Large images are resized and compressed, which can reduce quality.
- To disable this for specific images:
- Select the image in the Designer.
- Go to the Settings panel.
- Toggle OFF “Enable responsive images”.
2. Use High-Resolution Images
- Ensure your hero images are at least twice the displayed size in Webflow (e.g., if displayed at 1000px wide, upload a 2000px-wide version).
- Use WebP or PNG instead of JPEG for better quality.
3. Check Image Export Settings
- If you uploaded a compressed JPEG, Webflow’s optimization may further degrade it.
- Export images from Photoshop or Figma with:
- PNG (if needed) or WebP for high quality.
- JPEG with at least 80% quality for photos.
4. Disable Lazy Loading for Background Images
- Webflow applies lazy loading by default, which may cause blurriness until fully loaded.
- Select the image element, go to Settings, and set Lazy Load to “Eager”.
5. Set Background Images as Fixed Sizes
- Background images in Div Blocks may scale inconsistently.
- In the Style Panel, set:
- Background Size: Cover or Contain (to prevent stretching).
- Image Width: Auto (for aspect ratio preservation).
6. Prevent Browser Scaling Issues
- If images appear blurry on Retina or high-DPI screens, Webflow may be serving a lower-resolution version.
- Adjust the max-width settings in CSS to ensure high-resolution images are prioritized.
Summary
Webflow’s built-in optimization is likely compressing your images too aggressively. Try disabling responsive image resizing, using high-resolution images, and adjusting export settings. Also, check browser scaling and lazy loading settings for background images.