How can I maintain the original quality of my images in Webflow Designer when they appear blurry after uploading or publishing my project?
TL;DR
- Upload images at 2x their display size, use WebP or SVG formats, and enable HiDPI settings to ensure clarity.
- Avoid auto-compression by using background images or external hosting, and maintain correct aspect ratios using proper sizing and object-fit settings.
Blurry images in Webflow are usually caused by automatic compression, incorrect image sizing, or improper resolution settings. Here's how to maintain the original image quality within the Webflow Designer and published site.
1. Use Proper Image Dimensions and Resolution
- Upload images at 2x the displayed size to ensure clarity on high-DPI (Retina) screens.
- For example, if an image will display at 400×300 px, upload it at 800×600 px.
- Ensure images are saved at 72 PPI or higher before uploading.
2. Disable Webflow's Automatic Image Compression
- Webflow automatically compresses images like JPG, PNG, and GIF, but you can bypass this.
- Upload the image as a background image, not as an inline image, to avoid aggressive compression.
- Or, use WebP or SVG formats where appropriate:
- SVG: Best for logos and simple vector graphics (infinite resolution).
- WebP: Retains high quality at lower file sizes and is less affected by Webflow’s compression.
3. Use the Correct Display Settings
- Avoid stretching images with width: 100% if they are not large enough.
- Enable HiDPI (High Resolution) setting in Webflow:
- Select the image element.
- In the settings panel, check “HiDPI (2x)” if Webflow offers it based on the image's size.
4. Apply Custom Sizing and Object-Fit
- Use object-fit: cover or contain in the Style panel if the image is inside a container or div block to ensure it's not distorted.
- Avoid scaling images manually in the Designer if you are not maintaining their aspect ratio.
5. Replace Images with Non-Compressed Versions
- If an image appears blurry after publishing, try hosting the high-quality version externally and embed using an image link (useful for PNG or JPG you don’t want compressed).
- Alternatively, re-upload in WebP format with better resolution.
Summary
To maintain sharp image quality in Webflow, upload images at 2x resolution, choose formats like WebP or SVG, and avoid stretching or compression inside the Designer. Use background images when possible and ensure the HiDPI checkbox is active where available.