Blurry downscaled images in Chrome

Question

I am using gravatars and it's rather often when I downscale them with css, and I believe Google Chrome used to do it properly until recently ( I may be wrong, not sure when exactly the problem started to occur ) but now, images get blurred when downscaled, and that happens only in Chrome, FF downscales pretty good. I tried using image-rendering but it doesn't solve the problem. Can someone give me a hint what is the best way to go about it?

The example can be found here, open it in Chrome and then in FF, it should be way more blurred in Chrome than in FF.

Thank you

http://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in outlines this issue quite well. — Mathias W, Jun 19 '16 at 11:35
@MathiasW This is a different issue, I am not zooming anything in here. Just open that link in FF and chrome ( without zooming in ) and see the image in chrome being blurred. — NoDisplayName, Jun 19 '16 at 15:46
This issue seems to be back 2017-05-10, I pretty sure images didn't used to be fuzzy, but currently on Chrome desktop they are fuzzy, the answer webkit setting fixes the issue (and images on Firefox are fine) — James, May 10 '17 at 15:58
It'd be nice to see your full code. For example "`image-rendering` doesn't work" doesn't help much if we don't know the value you used (especially since it's used in the accepted answer) — shaedrich, Apr 07 '21 at 08:15
In my case the problem was with the image itself, as it had an odd height. — CamaroSS, Jan 27 '22 at 06:36

score 162 · Accepted Answer · edited Jul 06 '21 at 09:13

162

I found the exact same issue on Mac: Firefox downscales the image really well, while Chrome makes it look blurry, which is very bad. I couldn't care less about rendering time or speed, I need the logo to look GOOD!

I found the following CSS rule fixing Chrome for Mac

image-rendering: -webkit-optimize-contrast;

edited Jul 06 '21 at 09:13

Arsen K.

5,494
7
38
51

answered Feb 14 '17 at 00:43

pastullo

4,171
3
30
36

3

saved my day - also works with background images. It's odd that Chrome really does a bad job downscaling PNGs without this rule. – low_rents Nov 24 '17 at 10:03
8

Beware: this caused my images to be jagged/pixelated in Safari. – benjarwar Jan 19 '18 at 17:54
Is there any way to automatically apply this for all web pages in Chrome? Like a global CSS style? – Mr-IDE Jan 22 '18 at 16:55
3

This is not working for me in Chrome 64.0.3282.186 for Mac. – Badger Mar 05 '18 at 10:58
3

@Badger You may want to try `image-rendering: pixelated;` – Chris S. Jun 05 '19 at 14:02
5

Still an issue in 2020, and this answer still helped me (on Chrome 83) – manroe Jun 16 '20 at 02:10
Works really well! Thanks. For a logo though, you should use svg. Then it will always look perfectly sharp. – Skovsgaard Aug 08 '20 at 21:23
Working like a charm (both chrome & safari)! – Sebi Nov 08 '20 at 14:13
You legend!! Worked like a dream! Thanks, dude! – James Osguthorpe Nov 23 '20 at 23:26
Wow, it is really cool, although still a bit worse than in FF, now it doesn't burning eyes at least – portal TheAnGeLs Dec 08 '20 at 20:45
Doesn't work for Chrome 87 on Linux Mint. – yendrrek Dec 19 '20 at 09:00
This no longer has any effect in Chrome on Mac – Anna T May 11 '21 at 14:24
This still causes jagged/ugly edges in Safari on macOS as of July 2021. It seems like `transform: translateZ(0);` is the only solution that works everywhere. – Michael Jul 09 '21 at 21:32
Thanks this also worked for me on Linux (Ubuntu 20.04). Originally it looked blurry in Ungoogled Chromium but clear in Firefox, now is clear in both – Vijay Prema Aug 18 '21 at 06:08
1

None of what is on the page works with Chrome 93. Very weird. Also I notice that the zoom page at 100% renders downscaled images blurry but 110% renders perfectly crisps images. There really is a problem with Chrome. (Also Firefox is perfectly crisp whothout anything applied to it or any page Zoom used) – Maxence Dec 31 '21 at 11:43

score 25 · Answer 2 · edited Feb 17 '22 at 05:08

25

i find used transform: translateZ(0); is work.

by the similar question：How to prevent blur on image resize in Chrome?

edited Feb 17 '22 at 05:08

Pathik Vejani

4,263
8
57
98

answered Apr 07 '21 at 03:16

liujigang

521
6
6

Can you provide information _why_ this solves the question's problem? – shaedrich Apr 07 '21 at 08:13
Tested for Chromium-based (Chrome, Edge and Brave tested). According to this article, it makes the rendering be made by 3D hardware acceleration/GPU, and may cause issues with CSS animations, so better be used with caution. https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css – Daniel Lemes May 06 '21 at 04:01
1

Worked like a charm, up until and including Chrome 81. Doesn't seem to work with 82 and 83 (dev) anymore. – mbw Aug 02 '21 at 07:47

score 15 · Answer 3 · answered Sep 13 '21 at 00:50

15

It seems that transform: translateZ(0); does not work anymore.
The only property I found which had any effect was image-rendering: -webkit-optimize-contrast; (note: this has a much different effect on iOS safari, where it makes the image very pixelated, so you'll only want to enable it on chrome and edge)

Here is a comparison using this image: <img src="https://i.stack.imgur.com/acaio.jpg" style="width: 244px; height: 244px;"> (on windows 10) And a close-up of the text on the sign: I think firefox's rendering is significantly better, but optimize-contrast does help.

answered Sep 13 '21 at 00:50

12Me21

992
10
22

37

i am f*ing flabbergasted that this is a problem in 2021 – Alex Oct 26 '21 at 21:18
5

I suspect `-webkit-optimize-contrast` may have been removed recently. it seems to have no effect now (tested in ms edge version 99.0.1150.11, on linux) – 12Me21 Feb 27 '22 at 20:24

score 14 · Answer 4 · edited Jun 10 '22 at 14:26

14

Update

I didn't realize that the image size after using 2x matched the target size and the browser wasn't downscaling. This solution only works if you can use a fixed size container for the image.

tl;dr

Set the image scale and Chrome will downscale properly. Tested in Chrome 84.

The important part is using srcset with 2x at the end.

<img srcset="image-2x.png 2x" alt="alt">

Full Answer

I tried image-rendering: -webkit-optimize-contrast. It improved the rendered image in Chrome but also gave me a bad looking version of the image in Safari.

At first, I needed downscaling because the 2x version of the image is still needed for Retina displays (otherwise the upscaling might look blurry). So I decided to create the two versions (1x and 2x).

After adding both, I saw that if I only used the original 2x image but with the 2x specified in srcset then the image will not render blurry anymore.

edited Jun 10 '22 at 14:26

Lee Taylor

7,761
16
33
49

answered Jul 19 '20 at 22:18

rareyesdev

2,337
1
25
43

1

This is actually the correct approach, too bad your answer got downvoted ¯\_(ツ)_/¯. Thanks! https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset – Esteban Rocha Sep 07 '21 at 00:00
This did the trick for me, and not the "image-rendering" from the above answers. Upvoted this because no idea why this got downvoted. – Jrn Sep 09 '21 at 10:57
1

In 2021 this REALLY needs to be accepted as the correct answer for this issue. – Nickfmc Dec 03 '21 at 01:22
srcset with scale didn't work for me in my case – r g May 24 '22 at 07:47

score 8 · Answer 5 · answered Sep 10 '21 at 20:52

Pastullo's answer using image-rendering totally fixes the blurry image problem on Chrome, but the image is then pixelated on Safari. This combination of media queries worked for me to set the property on Chrome 29+ and unset it on Safari 11+:

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  img {
    image-rendering: unset !important;
  }
}}

score 7 · Answer 6 · answered May 10 '21 at 18:46

7

Use will-change: transform; in Chrome for Windows and image-rendering: -webkit-optimize-contrast; for Mac.

answered May 10 '21 at 18:46

Alexander Orlov

79
1
2

1

UPD: do not use `will-change: transform;` on pages that contain a lot of images. This feature uses GPU to render images so it may slow down the browser. – Alexander Orlov Nov 29 '21 at 12:01

score 4 · Answer 7 · answered Mar 31 '22 at 08:24

4

Using transform: translateZ(1px); fixed the issue for me in Chrome, while not visually impacting other browsers.

answered Mar 31 '22 at 08:24

Fabian

49
1

kiddac · Answer 8 · 2022-04-05T15:39:46.643

4

This will give you clean sharp images in scaled images in chrome. You need both translateZ(0) and scale not (1)

img {
border: none;
display: block;
transform: translateZ(0) scale(0.999999);
}

But if using any hover scale, make sure you also add in the translateZ(0) again.

i.e

img:hover {
transform: translateZ(0) scale(1.1);
}

edited Apr 05 '22 at 15:39

answered Apr 05 '22 at 15:27

kiddac

41
2

score 3 · Answer 9 · answered Jan 27 '22 at 14:04

I may complete this thread.

I found what could be considered as a bug (or maybe it's a feature).

If you downscale with CSS a logo in a big square bitmap image (500px x 500px JPEG for example) to 63px x 63px square, the result is very blurry in Chrome Version 97.0.4692.99 or any WebKit based browser I have on my computer. (Opera, Edge) But not Firefox.

Change to 64px x 64px, suddenly the result is better.

I suppose WebKit consider small sized images as unimportant and therefore could be scaled with a different, faster yet blurry algorithm.

If you scaled down logos on your website to 63px or 60px, consider making them a little bigger. Test in your inspector to verify if the rendering is satisfying.

You're all welcome!

Thanks, I went through all the answers none of them worked for me. — Malindu Sasanga, Feb 01 '23 at 10:38

score 2 · Answer 10 · edited Aug 13 '19 at 07:54

2

I propose another track because I was in the same situation: images slightly blurred under chrome but impeccable under firefox. Ctrl + "0" solved the problem. I had to one day use the zoom (Ctrl + "+" or "-") and did not reset it completely ...

edited Aug 13 '19 at 07:54

Jan Sršeň

1,045
3
23
46

answered Aug 13 '19 at 07:29

delaio

39
1

score 1 · Answer 11 · answered Feb 14 '17 at 00:45

1

I've found that the best way to resolve this issue is to just use an svg. Another option is to use css media queries to load adaptive images sizes.

answered Feb 14 '17 at 00:45

ShaneDaugherty

427
4
7

For a lot of images, this is not an option. Also, they're not *fully* supported (see the notes for IE): http://caniuse.com/#feat=svg – carefulnow1 Jun 03 '17 at 16:36
Not even Microsoft wants* you to care about that anymore. *) https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/ – Chris S. Jun 05 '19 at 14:05
1

Not sure why this answer is rated so low. This is actually the most optimal solution. Most modern design tools support `svg` export now for any asset – D_S_X Jul 29 '21 at 09:31
1

2021 approved. Upvote this guy. – Hannes Schneidermayer Dec 08 '21 at 17:09

Alvin Konda · Answer 12 · 2022-12-10T11:19:34.603

1

I noticed that if the images are scaled 2 times more than the specified width and height they display perfectly.

For example, the "some-image.jpg" dimensions for the code below should be: 200x200

<img src="some-image.jpg" alt="" width="100" height="100">

edited Dec 10 '22 at 11:19

answered Jun 10 '22 at 14:22

Alvin Konda

2,898
1
22
22

Blurry downscaled images in Chrome

12 Answers12

Linked