CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxgravatar
NoDisplayName
NoDisplayName

Reputation: 15736

Blurry downscaled images in Chrome

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

Upvotes: 83

Views: 80458

Answers (12)

Alvin Konda
Alvin Konda

Reputation: 3248

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">

Upvotes: 1

rareyesdev
rareyesdev

Reputation: 2417

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.

Upvotes: 14

kiddac
kiddac

Reputation: 41

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);
}

Upvotes: 4

Fabian
Fabian

Reputation: 69

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

Upvotes: 6

liujigang
liujigang

Reputation: 611

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

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

Upvotes: 24

RomainFromCM
RomainFromCM

Reputation: 31

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!

Upvotes: 3

12Me21
12Me21

Reputation: 1159

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.sstatic.net/acaio.jpg" style="width: 244px; height: 244px;"> (on windows 10) comparison And a close-up of the text on the sign: I think firefox's rendering is significantly better, but optimize-contrast does help. close-up comparison

Upvotes: 15

GoojajiGreg
GoojajiGreg

Reputation: 1183

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;
  }
}}

Upvotes: 8

pastullo
pastullo

Reputation: 4201

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;

Upvotes: 163

Alexander Orlov
Alexander Orlov

Reputation: 79

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

Upvotes: 7

delaio
delaio

Reputation: 37

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 ...

Upvotes: 2

ShaneDaugherty
ShaneDaugherty

Reputation: 427

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.

Upvotes: 1

Related Questions