Chrome 84 中缩小后的图像模糊

Question

最近一次 Google Chrome 更新后，我网站上的 Retina 图像变得模糊。它们仍然是视网膜图像（当我在新选项卡中打开图像时，它是双倍尺寸的图像），但由于某种原因，它们看起来像非视网膜图像一样模糊。因此，图像的缩小算法似乎有问题。

1) Firefox、Opera 和 Microsoft Edge 中的 Retina 图像看起来不错。

2)安装旧版本 Chrome 之一 (83.0.4103.116) 后，该问题不再存在。我只是进一步调查了这一点，发现该问题是在 Chrome 84.0.4147.89 版本（Windows、桌面）中引入的。之前的 83.0.4103.116 版本中不存在该问题！

我也只是尝试将这个 CSS 添加到图像中，它确实解决了问题，但它过去没有它也可以工作：

图像渲染：-webkit-optimize-contrast

解决该问题的另一件事是禁用Chrome 系统设置中的“可用时使用硬件加速”设置。

PS 昨天情况恢复正常一段时间，视网膜图像显示正确，但今天又发生了。

我附上网站的屏幕截图供您比较（当前 Chrome 版本与旧版本）：

首页的全尺寸屏幕截图：

标志图片：

模糊（新 Chrome）

夏普（旧版 Chrome）

Answer 1

我终于明白发生了什么事。

如果您打算制作 2 倍图像，则像素必须能被 2 整除。如果您的图像的像素数为奇数，则图像会变得模糊。当我确保图像的宽度和高度均为偶数，然后精确调整 50% 的大小（针对视网膜）时，清晰度又回来了。

然而，这并不能解决每个人都想要响应式图像的问题，但它确实使它比以前更好（甚至响应式）。

希望这对其他人有帮助。这是令人悲伤的一天，Chrome 发布了这个让互联网看起来变得模糊的更新。

Answer 2

尝试transform: translateZ(0);

（在这篇文章中找到：/sf/answers/2754490791/）。

它解决了我在 Linux Mint 上的 Chrome 87 中图像模糊的问题。

更新一段时间后，我发现，尽管它确实使 Chrome 中的图像变得清晰，但当您放大图像时，它也会使 iPhone 7 上的浏览器崩溃。