最近一次 Google Chrome 更新后，我网站上的 Retina 图像变得模糊。它们仍然是视网膜图像（当我在新选项卡中打开图像时，它是双倍尺寸的图像），但由于某种原因，它们看起来模糊就像非视网膜图像一样。因此，图像的缩小算法似乎有问题。
1)Firefox、Opera 和 Microsoft Edge 中的 Retina 图像看起来不错。
2)安装较旧版本的 Chrome 之一 (83.0.4103.116) 后，该问题不再存在。我只是进一步调查了这一点，发现该问题是在 Chrome 84.0.4147.89 版本（Windows、桌面）中引入的。问题是not存在于之前的 83.0.4103.116 版本中！
我也刚刚尝试将此 CSS 添加到图像中，它does解决了这个问题，但它曾经在没有它的情况下工作：
图像渲染：-webkit-optimize-contrast
解决问题的另一件事是禁用“如果可用，请使用硬件加速“Chrome 系统设置中的设置。
附：昨天，情况恢复正常一段时间，视网膜图像显示正确，但今天又发生了。
该网站是www.pianodreamers.com http://www.pianodreamers.com
我附上网站的屏幕截图供您比较（当前 Chrome 版本与旧版本）：
首页的全尺寸屏幕截图：
https://gofile.io/d/pRtSwG https://gofile.io/d/pRtSwG
标志图片：
我终于明白发生了什么事。
如果您打算制作 2 倍图像，则像素必须能被 2 整除。如果您的图像的像素数为奇数，则图像会变得模糊。当我确保图像的宽度和高度均为偶数，然后精确调整 50% 的大小（针对视网膜）时，清晰度又回来了。
然而，这并不能解决每个人都想要响应式图像的问题，但它确实使它比以前更好（甚至响应式）。
希望这对其他人有帮助。这是令人悲伤的一天，Chrome 发布了这个让互联网看起来变得模糊的更新。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
