Chrome 84中模糊的缩小图像

Question

在最近的 Google Chrome 更新之后，我的网站上的 Retina 图像变得模糊。它们仍然是 Retina 图像（当我在新标签页中打开图像时，它是双倍大小的图像），但由于某种原因，它们看起来就像非 Retina 图像一样模糊。因此，似乎图像的缩小算法出了问题。

1）Firefox、Opera 和 Microsoft Edge 中的 Retina 图像看起来很好。

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

我还尝试将此 CSS 添加到图像中，它确实可以解决问题，但以前不需要这样做：

image-rendering: -webkit-optimize-contrast

另一个解决问题的方法是在 Chrome 的系统设置中禁用“启用硬件加速”设置。

附注：昨天一段时间内事情恢复了正常，视网膜图像正确显示，但今天又出现了问题。

该网站为www.pianodreamers.com。

我会为您提供网站截图以供比较（当前Chrome版本与旧版本）：

首页全尺寸截图：

https://gofile.io/d/pRtSwG

标志的图像：

- MikeRoss

---

问题在一天中不断消失和出现。我还没有找到任何模式，可以让我确定是什么导致了这种情况。 - MikeRoss

现在，它是恒定的。它很模糊，一点也不清晰，已经过去几个月了，仍然没有修复。 - MikeRoss

Answer 1

我终于弄清楚发生了什么事情。

如果您计划创建一个2倍大小的图像，则像素必须完美地被2整除。如果您有某些奇数像素的东西，图像就会变得模糊不清。当我确保我的图像宽度和高度都是偶数并且进行了精确的50％缩放（用于视网膜显示器）后，清晰度恢复了。

但是，这并不能解决每个人都想要响应式图像的问题，但肯定比以前（即使是响应式）要好一些。

希望这能帮助其他人。 Chrome发布此更新使互联网变得模糊，这是个悲伤的日子。

- Clint Decker

---

谢谢分享！我还没有尝试过你的解决方案，所以无法确认。我的大多数图像都可以被2整除，但似乎并不重要。也许问题在于我使用了1.4倍因子，因此一旦屏幕的像素比率达到1.4倍或更高，视网膜图像就会加载（这些图像的分辨率是普通图像的两倍）。这样，既不是视网膜（像素比率低于2倍），也不是普通（像素比率高于1倍）的屏幕也会得到更高分辨率的图片。目前，我正在使用image-rendering：-webkit-optimize-contrast，这似乎是一个快速解决方法... - MikeRoss

一些人提到在Safari中它会破坏锐度，但我无法进行适当的测试，因为我只有iPad上的Safari。同时，我已经问了几个人，看起来网站在Safari中看起来很好，所以我现在继续使用那个CSS规则。 - MikeRoss

Answer 2

试试使用transform: translateZ(0);

(找到于这篇帖子中：https://dev59.com/0lkS5IYBdhLWcg3w456B#39349868)。

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

更新 经过一段时间的发现，尽管它能够使Chrome中的图像更清晰，但同时它也会导致iPhone 7上的浏览器在缩放图像时崩溃。

- yendrrek

---

谢谢分享！这个解决方案确实有效，就像我之前提到的那个：image-rendering: -webkit-optimize-contrast。但仍然不清楚为什么会发生这种情况，以及为什么Chrome没有修复它。这不仅影响我的网站，也会在其他网站上发生，非常烦人。我想我可以使用transform: translateZ(0)，但我并不完全理解它是如何工作的。我在某个地方读到过，它会欺骗GPU认为它是一个动画，如果你在所有图片上都使用它，可能会超载GPU，所以我不知道...我希望Chrome能够在内部解决这个问题。 - MikeRoss

当我使用<picture>元素为不同的屏幕尺寸加载不同的图片时，我不得不使用translateZ(0)。然而，并非所有照片都能正常工作，在另一页上，我不得不使用image-rendering: pixelated;，这样就可以在Firefox中使图像不会过于清晰，而且所有图像都可以正常渲染，无需任何技巧。 - yendrrek

在Chrome中，对我来说image-rendering: -webkit-optimize-contrast效果更好，当我使用pixelated时，它太...嗯...像素化了 :) 但是我也不想使用image-rendering: -webkit-optimize-contrast，因为我听说它可能会破坏Safari中的图像外观，而我无法进行适当的测试。对我来说，在Chrome 83中不存在这个问题，所以显然他们在Chrome 84中做了一些改变导致了这个问题。这并不太合理，因为Opera和Firefox可以很好地处理这些缩小的图像（清晰明了）。 - MikeRoss