0

A customer found the images on her WordPress website too blurry. All images were uploaded larger than needed. For example, the image is displayed 620px wide and was uploaded 800px wide to prevent upscaling. Anyway, the images were blurry. I couldn't make sense of this and created a simple static HTML page:

https://demo.my-blog-shop.de/bild.html

Max. width should be 620px. I uploaded the image with 620px width and 1800px width and scaled them down bei CSS: 620px to 619px, 1800px to 620px.

The large image did not look better than the smaler one. This was no surprise. What really surprised me is that the CSS scaled images look much blurrier than the ones reduced in size in Photoshop. And this is not a minor difference.

Is there a solution for that? Best practice would be to upload (or create automatically) a set of images that contains all image sizes that are used on the specific site. However, I've always thought, it's ok to upload an image slightly larger than needed. But this is obviously wrong.

1

Don't scale raster images on a website. The blurring is not caused by the CSS rescaling as such, but by the way scaled images are rendered in browsers.

The solution is to create the images so they display at 1:1 - actual size. Photoshop and other raster image editors have more sophisticated algorithms (interpolation methods) for resampling images smaller, which can help preserve details and sharpness.

Note: You may also need to serve larger size versions of images for viewers with devices that have high resolution displays. If viewers have scaling enabled in their display settings, images that look fine with no scaling will look blurry when enlarged for a high resolution display.

| improve this answer | |
  • OK, thanks.I must admit that I have never been aware of this problem when it comes to down scaling. – user2516117 May 13 at 13:32
  • @user2516117 You may have simply never noticed it before since the difference can be subtle and may depend on what kind of image you are resizing, for example it may be more noticeable with graphics compared to a photograph. However, if your client is noticing it, and is unhappy, then it is a problem. Another possible option is perhaps to use SVGs for graphics - since vectors are scalable, unlike raster images. Note however that even vector images are rendered with pixels on screen in a browser, so really fine details may be lost in lines that are thinner than a pixel. – Billy Kerr May 13 at 14:12
  • Well, we found out that the major "issue" is my client's retina display. Even if we use a larger image that is CSS scaled down it looks MUCH sharper than a smaller image. I don't really get it. If the max-width of the container DIV is, say, 600px, why would a 1200px image look better on a retina display? On my 1920p display the larger image looks WORSE and very blurry. The 1:1 image size is much better. However, on my client's display the larger image looks better. What am I missing? Is this an antialiasing issue? – user2516117 May 14 at 13:19
  • Because there are more pixels (higher pixel density) in a high resolution display, so a larger image will look better than a small image scaled up. On your own screen, the large image is probably being scaled down to fit, so it looks worse. – Billy Kerr May 14 at 17:22
  • But why would a larger image scaled down look worse on a standard 1920p display? I simply don't get it. In Photoshop, reducing the size makes the image usually sharper. I thought that scaling down in the browser would be pretty good today. That was obviously a wrong assumption. – user2516117 May 16 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.