Why are resized images in Webflow so blurry?

Why are images in Webflow so blurry when scaled automatically and/or manually?

As an example, view the following page:

http://new-636738.webflow.io/

The retina image in the bottom div is the original image size. The others are automatically scaled by the browser/Webflow. Notice how blurry the top row images are?

Why are they so blurry? Typically as you scale an image smaller the image becomes sharper, not blurry.

Any ideas what’s going on and how to make your images look better (JPGs in particular)?

Having the same issue with my logo on: http://wwweb-agentur.webflow.io/

Its blurry on ipad and on smartphones, but it looks good on desktop.

SHARED LINK: https://preview.webflow.com/preview/wwweb-agentur?preview=96706d1cc1da2522811f8dbd8914d3d3

The retina image in the bottom div is the original image size. The others are automatically scaled by the browser/Webflow. Notice how blurry the top row images are?

Why are they so blurry? Typically as you scale an image smaller the image becomes sharper, not blurry.

Any ideas what’s going on and how to make your images look better (JPGs in particular)? You can try http://torrentunblock.xyz/unblock/extratorrents/ for more details and updates

I’m surprised this isn’t a bigger issue for more people as it affects any image that is resized (GIF, PNG, JPG).

Anyone know how to fix/address this issue?

@jensvahle Your logo image is only 67 x 36px. Thats way too small even for regular screens (might look “okay” on your desktop but smartphones & tablets are hidpi/retina). :slight_smile:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.