Blurry images in Webflow on mobile or desktop

Sometimes we have issues when we want to display crisp client images in our Webflow projects. It is an annoying bug that is hard to debug and is triggered by a specific layout structure.

The blurred images can have many causes, when we detect them we should go through the below list which helped me on multiple occasions.

Don’t compress the image too much

Compressing the image too much can have adverse effects on image quality. After optimising the image always check the end result and look if the image is of acceptable quality.

Export the image as 2x

Export the .png or .jpg assets as 2x in size for crisp images on retina screens. Then in Webflow mark them as HiDPI and make sure the width value is set. Make sure that the width value is not a fraction number (instead of 490.5px it should be 490px) and if needed resize the image to dimensions dividable by 2 before uploading to Webflow.

Disable Responsiveness of the image

Normally this is working and counts as a fix to a bug that is causing a blurred image when using CSS Grid. The issue is visible if we have a layout set up with grid and then we position the image manually inside the grid. If the image is auto positioned the image is displayed crisp.

When we set manual column or row position for the image on first load and on hard refresh the image is blurry. If we refresh once again the image is crisp again. To fix this bug the only option is to either auto position the image in the grid, use Flex layout or disable responsiveness in WF for that image.