Blurry downscaled images in Chrome
Solution 1
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;
Solution 2
i find used transform: translateZ(0);
is work.
by the similar question:How to prevent blur on image resize in Chrome?
Solution 3
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.
Solution 4
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.
Solution 5
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;
}
}}
NoDisplayName
Updated on February 17, 2022Comments
-
NoDisplayName over 2 years
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
-
carefulnow1 about 7 yearsFor a lot of images, this is not an option. Also, they're not fully supported (see the notes for IE): caniuse.com/#feat=svg
-
low_rents over 6 yearssaved my day - also works with background images. It's odd that Chrome really does a bad job downscaling PNGs without this rule.
-
benjarwar over 6 yearsBeware: this caused my images to be jagged/pixelated in Safari.
-
Mr-IDE over 6 yearsIs there any way to automatically apply this for all web pages in Chrome? Like a global CSS style?
-
Badger over 6 yearsThis is not working for me in Chrome 64.0.3282.186 for Mac.
-
Chris S. about 5 years@Badger You may want to try
image-rendering: pixelated;
-
Chris S. about 5 yearsNot even Microsoft wants* you to care about that anymore. *) zdnet.com/article/…
-
manroe about 4 yearsStill an issue in 2020, and this answer still helped me (on Chrome 83)
-
Skovsgaard almost 4 yearsWorks really well! Thanks. For a logo though, you should use svg. Then it will always look perfectly sharp.
-
Sebi over 3 yearsWorking like a charm (both chrome & safari)!
-
James Osguthorpe over 3 yearsYou legend!! Worked like a dream! Thanks, dude!
-
portal TheAnGeLs over 3 yearsWow, it is really cool, although still a bit worse than in FF, now it doesn't burning eyes at least
-
yendrrek over 3 yearsDoesn't work for Chrome 87 on Linux Mint.
-
shaedrich about 3 yearsCan you provide information why this solves the question's problem?
-
Daniel Lemes about 3 yearsTested 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. blog.teamtreehouse.com/…
-
Anna T about 3 yearsThis no longer has any effect in Chrome on Mac
-
Michael almost 3 yearsThis 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. -
D_S_X almost 3 yearsNot 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 -
mbw almost 3 yearsWorked like a charm, up until and including Chrome 81. Doesn't seem to work with 82 and 83 (dev) anymore.
-
Vijay Prema almost 3 yearsThanks 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
-
Esteban Rocha almost 3 yearsThis is actually the correct approach, too bad your answer got downvoted ¯_(ツ)_/¯. Thanks! developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/…
-
Jrn almost 3 yearsThis did the trick for me, and not the "image-rendering" from the above answers. Upvoted this because no idea why this got downvoted.
-
Alex over 2 yearsi am f*ing flabbergasted that this is a problem in 2021
-
Alexander Orlov over 2 yearsUPD: 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. -
Nickfmc over 2 yearsIn 2021 this REALLY needs to be accepted as the correct answer for this issue.
-
Hannes Schneidermayer over 2 years2021 approved. Upvote this guy.
-
Maxence over 2 yearsNone 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)
-
12Me21 over 2 yearsI 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) -
r g about 2 yearssrcset with scale didn't work for me in my case