5

After one of the recent Google Chrome updates, Retina images on my website became blurry. They are still Retina images (when I open the image in a new tab, it's a double-size image), but for some reason, they look blurry like non-Retina images. So, it looks like there's something wrong with the down-scaling algorithm for images.

1) Retina Images in Firefox, Opera and Microsoft Edge look just fine.

2) After installing one of the older versions of Chrome (83.0.4103.116), the issue is not present. I just investigated this further and found that the issue was introduced in the 84.0.4147.89 version of Chrome (Windows, desktop). The issue was not present in the previous 83.0.4103.116 version!

I also just tried adding this CSS to images and it does fix the issue, but it used to work without it:

image-rendering: -webkit-optimize-contrast

Another thing that fixed the problem is disabling the "Use hardware acceleration when available" setting in Chrome's System settings.

P.S. Yesterday things went back to normal for a while and retina images displayed correctly, but today it's happening again.

The site is www.pianodreamers.com

I'm attaching screenshots from the website for you to compare (current Chrome version vs an older version):

Full-size screenshots of the front page:

https://gofile.io/d/pRtSwG

Images of the logo:

Blurry (new Chrome)

Sharp (older Chrome)

Nathan
  • 1,303
  • 12
  • 26
MikeRoss
  • 53
  • 1
  • 6
  • The issue keeps disappearing and coming back throughout the day. I haven't been able to find any pattern that would allow me to pinpoint what's causing that. – MikeRoss Aug 22 '20 at 09:16
  • 2
    Now, it's constant. It's blurry and doesn't switch back to sharp at all, it's been several months already, still no fix. – MikeRoss Nov 09 '20 at 14:21

2 Answers2

6

I finally figured out what's happening.

If you're planning on doing a 2x image, the pixels have to be perfectly divisible by 2. If you have something with an odd number pixels, the image comes out blurry. When I made sure my image was an even number both width and height and then I did an exact 50% resize (for retina), the sharpness came back.

However, this doesn't solve the issues where everyone wants responsive images, but it certainly makes it better than before (even responsive).

Hope this helps others. This was a sad day when Chrome released this update that made the internet look blurry.

Clint Decker
  • 121
  • 1
  • 3
  • Thanks for sharing this! I haven't tried your solution so can't confirm. Most of my images are dividable by two but it doesn't seem to matter. Maybe the problem is that I'm using 1.4x factor, so that as soon as the screen's pixel ratio becomes 1.4x or over, retina images would load (which are double the resolution of my regular images). That way screens that are not quite retina (less than 2x pixel ratio) but also not regular (pixel ratio above 1x) would get higher-res pictures as well. Right now I'm using image-rendering: -webkit-optimize-contrast which seems to be a quick fix for this... – MikeRoss Jun 03 '21 at 02:20
  • ...some people have mentioned that it messes up sharpness In Safari, but I can't really test this properly, since I only have Safari on my iPad. At the same time, I've asked a few people and it looks like the site looks fine in Safari, so I keep using that CSS rule for now. – MikeRoss Jun 03 '21 at 02:23
4

Try transform: translateZ(0);

(Found in this post: https://stackoverflow.com/a/39349868/12208549 ).

It solved my issue with blurred images in Chrome 87 on Linux Mint.

UPDATE After some time I discovered that, even though it does make images in Chrome crisp, it can also make browsers on iPhone 7 crash when you zoom images in.

yendrrek
  • 191
  • 2
  • 12
  • Thanks for sharing this! The solution does work, just like the one I mentioned earlier: image-rendering: -webkit-optimize-contrast. But it's still not clear why this is happening, and why Chrome isn't fixing it. It doesn't affect just my site, it happens on other sites too, which is annoying. I guess I could use transform: translateZ(0) but I don't exactly understand how it works. I read somewhere that it tricks GPU to think that it's an animation and it may overload GPU if you use this on all pictures, so I don't know...I'd like this to be fixed internally by Chrome. – MikeRoss Dec 20 '20 at 13:29
  • I had to use `translateZ(0)` when I started loading different pictures for different screen sizes using `` element. It didn't work with all photos, though, on other page I had to use `image-rendering: pixelated;` which did the trick without making the image too sharp in Firefox where all images render fine without any hacks. – yendrrek Dec 20 '20 at 14:16
  • In Chrome, `image-rendering: -webkit-optimize-contrast` works better for me, when I use `pixelated`, it's too...well...pixelated :) But I don't want to use `image-rendering: -webkit-optimize-contrast` either since I heard it can mess up how images look in Safari, which I can't test properly. For me, the issue wasn't present in Chrome 83, so apparently, they made some changes to Chrome 84 that causes this. Doesn't make much since Opera and Firefox handle these downscaled images just fine (nice and sharp). – MikeRoss Dec 21 '20 at 18:43