16

The images are really blurry if you use resize an image, for example showing a small image with resized dimensions, like;

<img src="largeimage.jpg" width=30 height=30 \>

Its not blurry in other browsers, but in Chrome, its so blurry. I have looked at in www.twitter.com , their new design has lots of resized images and somehow, they have managed to clear blur in resized images. I have tried these;

image-rendering: crisp-edges;
image-rendering: pixelated;

But unfortunately, it doesn't solve the problem.

Below is a comparison. On the left, you can see that it is quite blurry, compared to that on the right: Comparison of blurriness

What is the correct way to do that ?

Hopeful Llama
  • 728
  • 5
  • 26
user3304007
  • 446
  • 1
  • 7
  • 17
  • 1
    Could you post a comparison of the blurriness and original image or provide a plnker/codepen etc? – Hopeful Llama Sep 06 '16 at 11:07
  • 1
    Added the image to the question. – user3304007 Sep 06 '16 at 11:11
  • I have really looked at the resized images on twitter.com with firebug and web developer tools, but couldnt findout how they have managed to fix the problem. – user3304007 Sep 06 '16 at 11:16
  • Show an actual plnker/codepen/fiddle please, so that we can look at the specific issue live. [mcve] – CBroe Sep 06 '16 at 11:30
  • 1
    the solution from @Quist is on the right track - use the `transform: translateZ(0);` adjustment. Here is an easy example: https://codepen.io/rwcorbett/pen/gWBZRp – rwcorbett May 19 '17 at 14:59

4 Answers4

18

Have you tried this? :)

filter: blur(0);
-webkit-filter: blur(0);
transform: translateZ(0);
-webkit-transform: translateZ(0);
Quist
  • 181
  • 2
  • 6
    I am finding that it is the `transform: translateZ(0);` that is affecting this, not-so-much the filter – rwcorbett May 19 '17 at 14:46
  • 2
    `transform: translateZ(0);` fixed blurred images for me in Chrome 87 on Linux Mint 19.3. Thank you. – yendrrek Dec 19 '20 at 11:01
4

I've noticed that Chrome does a better job when you resize an image at a certain percentage. For example, if you resize a 375px image to 100, it gets blurry, but if you resize 200 to 100, it does a better job because it's a nice even 50% scale.

Without an editable test environment, I'm not sure if that would fix it for you, but it's worth a shot.

kthornbloom
  • 3,660
  • 2
  • 31
  • 46
4

You could set image-rendering to pixelated, in order to preserve the original pixelated form. The below should work as expected on Chrome (and Opera) browser as well.

img {
  image-rendering: pixelated;
}

As per the documentation:

  • pixelated

    Using the nearest-neighbor algorithm, the image is scaled up to the next integer multiple that is greater than or equal to its original size, then scaled down to the target size, as for smooth. When scaling up to integer multiples of the original size, this will have the same effect as crisp-edges.

Chris
  • 18,724
  • 6
  • 46
  • 80
  • As of today, Chrome does not recognize `crisp-edges` value. `pixelated` is still OK and still solves this kind of issue. – Rodolphe Nov 17 '22 at 12:56
0

I've just had this issue in a WordPress gallery with six images using WEBP files. One image was sharp the others slightly blurry in Chrome etc. but ok in Firefox. I cropped the five to the exact size of the sharp image which was 1200 x 650px and replaced the 'blurry' ones in the gallery with the newly cropped versions. They are all displaying ok now. Some crops just shaved as little as 4 pixels from the depth.

Fins
  • 15
  • 6