Chrome 84中的图像模糊不清 [英] Blurry downscaled images in the Chrome 84
问题描述
最近一次Google Chrome更新之后，我网站上的Retina图像变得模糊.它们仍然是Retina图像(当我在新标签页中打开图像时，它是双倍尺寸的图像)，但是由于某些原因，它们像非Retina图像一样看起来很模糊.因此，图像的缩小算法似乎出了问题.
1)在Firefox，Opera和Microsoft Edge中的Retina图像看起来还不错.
2)安装了其中一个较旧版本的Chrome(83.0.4103.116)之后，该问题不存在.我只是对此进行了进一步调查，发现此问题是在84.0.4147.89版本的Chrome(Windows，台式机)中引入的.在以前的83.0.4103.116版本中不存在该问题！
我也刚刚尝试将此CSS添加到图像中，并且确实修复了该问题，但以前没有它就可以工作:
图像渲染:-webkit-optimize-contrast
解决该问题的另一件事是禁用"在可用时使用硬件加速"在Chrome的系统设置"中设置.
P.S.昨天情况恢复了一段时间，视网膜图像正确显示，但今天又发生了.
该网站为).
>它解决了我在Linux Mint上的Chrome 87中图像模糊的问题.
更新一段时间后，我发现，即使它确实使Chrome中的图像变清晰，但当放大图像时，它也会使iPhone 7上的浏览器崩溃.
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:
Images of the logo:
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.
这篇关于Chrome 84中的图像模糊不清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
