How to fix blurry images in Webflow?

Blurry images on a Webflow site usually come from one of a few causes: low-resolution source files, aggressive compression, incorrect sizing settings, or responsive image handling. Each has a different fix.

Common causes and solutions

Source image is too small

If the original image is smaller than the display size, Webflow has to scale it up, causing blurriness. This is especially noticeable on hero sections and full-width images.

Fix: Upload an image that is at least as large as the largest display size. For a full-width hero on a 1920px-wide screen, the source image should be at least 1920px wide. A good rule of thumb is to upload images at 2x the display size for retina screens.

Image set to the wrong size mode

Webflow's Image element has three size modes: Original, Cover, and Contain. If the mode is wrong, the image may stretch or distort.

Fix:

1. Select the Image element.
2. In the Settings panel, check the Size dropdown.
3. For most use cases, use Cover — it fills the container and crops excess. This preserves sharpness better than stretching.

Aggressive compression

Webflow automatically serves optimized images, which can sometimes result in visible compression artifacts, especially on images with fine detail or text.

Fix: Upload a higher-quality source file. If you compressed the image before uploading, try re-exporting at quality 85–90 instead of 60–70. WebP at quality 80 or above typically looks sharp.

Retina display considerations

On high-DPI (retina) screens, standard-resolution images appear soft. Webflow automatically generates multiple resolutions of uploaded images, but if the source file is too small, even the generated versions will lack detail.

Fix: Upload source images at 2x the display dimensions. For example, if an image displays at 600x400px, upload a 1200x800px version.

Background images appearing blurry

Background images have a separate setting for size and position.

Fix:

1. Select the element with the background image.
2. Go to the Style panel, find the Background section.
3. Set background size to Cover (not Auto or Contain).
4. Ensure the source image is high-resolution enough for the element's dimensions.

CMS images

CMS images go through additional processing. If CMS images look blurry:

1. Check the original file resolution in the CMS item.
2. Ensure the image field is set to display at the correct size in the template.
3. Upload a higher-resolution version if the original is small.

Quick checklist

• Source image width at least matches the container width (preferably 2x).

• Image element set to Cover mode.

• Source file quality is 80+ (for JPG/WebP).

• Background images use Cover sizing.

• Test on both standard and retina displays.