Menu
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:
517
Many users have been reporting that sometimes Chrome looks blurry. To fix that, you just need to clear your cache and browsing data. Resetting the browser settings to default can also help with these types of issues.
If Google doesn't own the photo, the photo owner is responsible for blurring the photo before publishing it. If you think that someone else has published a photo of you that violates the Maps User Contributed Content Policy, report the photo using the instructions below.
Simple, the browser is trying to maintain the image aspect ratio based on the original size, resulting in a calculated height with a decimal value which in turn causes pixel compression, hence a blurry image.
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.
82
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.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
