Chrome 中的模糊缩小图像

Question

我正在使用 gravatars，当我用 css 缩小它们时，我经常使用它，我相信 Google Chrome 直到最近才正确地使用它（我可能是错的，不确定问题是什么时候开始出现的）但是现在，图像在缩小时会变得模糊，而且这种情况只发生在 Chrome 中，FF 缩小非常好。我尝试使用 image-rendering 但它没有解决问题。谁能告诉我最好的方法是什么？

示例可以在 here 中找到，在 Chrome 中打开它，然后在 FF 中打开它，在 Chrome 中应该比在 FF 中更模糊。

谢谢

Answer 1

我在 Mac 上发现了完全相同的问题：Firefox 很好地缩小了图像，而 Chrome 让它看起来很模糊，这非常糟糕。我不在乎渲染时间或速度，我需要徽标看起来不错！

我发现以下 CSS 规则修复 Chrome Mac

image-rendering: -webkit-optimize-contrast;

Answer 2

我发现解决这个问题的最好方法就是使用 svg。另一种选择是使用 css 媒体查询来加载自适应图像大小。

Answer 3

我提出了另一条轨道，因为我处于同样的情况：图像在 chrome 下略微模糊，但在 firefox 下无可挑剔。 Ctrl + "0" 解决了问题。我不得不有一天使用缩放（Ctrl + "+" 或 "-"）并且没有完全重置它...

Answer 4

更新

我没有意识到使用 2x 后的图像大小与目标大小相匹配，并且浏览器没有缩小尺寸。此解决方案仅在您可以为图像使用固定大小的容器时才有效。

tl;博士

设置图片比例，Chrome会适当缩小。在 Chrome 84.

中测试

重要的部分是在末尾使用 srcset 和 2x。

<img srcset="image-2x.png 2x" alt="alt">

完整答案

我试过了image-rendering: -webkit-optimize-contrast。它改进了 Chrome 中的渲染图像，但也让我在 Safari 中看到了一个糟糕的图像版本。

起初，我需要缩小尺寸，因为 Retina 显示器仍然需要图像的 2x 版本（否则放大可能看起来很模糊）。所以我决定创建两个版本（1x 和 2x）。

添加两者后，我看到如果我只使用原始 2x 图像但使用 srcset 中指定的 2x，则图像将不再模糊。

Answer 5

我发现用过 transform: translateZ(0); 是可行的。

同问：How to prevent blur on image resize in Chrome?

Answer 6

在 Chrome 中对 Windows 使用 will-change: transform;，对 Mac 使用 image-rendering: -webkit-optimize-contrast;。

Answer 7

使用 image-rendering 完全解决了 Chrome 上的模糊图像问题，但图像随后在 Safari 上像素化。这种媒体查询组合对我有用，可以在 Chrome 29+ 上设置属性并在 Safari 11+ 上设置 unset：

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  img {
    image-rendering: unset !important;
  }
}}

Answer 8

transform: translateZ(0);好像已经不行了.
我发现唯一有影响的属性是 image-rendering: -webkit-optimize-contrast;（注意：这对 iOS safari 有很大不同的影响，它使图像非常像素化，所以你只想在 chrome 和 edge)

上启用它

这是使用此图像的比较：<img src="https://i.stack.imgur.com/acaio.jpg" style="width: 244px; height: 244px;">（在 windows 10 上）标牌上的文字特写：我认为 firefox 的渲染明显更好，但优化对比度确实有帮助。

Answer 9

我可能会完成这个线程。

我发现了可以被视为错误（或者可能是功能）的内容。

如果使用 CSS 大方形位图图像（例如 500px x 500px JPEG）中的徽标缩小到 63px x 63px 方形，结果在 Chrome 版本 97.0 中非常模糊。 4692.99 或我计算机上的任何基于 WebKit 的浏览器。（Opera、Edge）但不是 Firefox。

改成64px x 64px，突然效果变好了。

我想 WebKit 认为小尺寸图像不重要，因此可以使用不同的、更快但模糊的算法进行缩放。

如果您将网站上的徽标缩小到 63 像素或 60 像素，请考虑将它们放大一点。在检查器中进行测试以验证渲染是否令人满意。

不客气！

Answer 10

使用 transform: translateZ(1px); 为我解决了 Chrome 中的问题，同时不会在视觉上影响其他浏览器。

Answer 11

这将使您在 chrome 的缩放图像中获得清晰锐利的图像。你需要 translateZ(0) 和 scale not (1)

img {
border: none;
display: block;
transform: translateZ(0) scale(0.999999);
}

但是如果使用任何悬停比例，请确保您还再次添加了 translateZ(0)。

即

img:hover {
transform: translateZ(0) scale(1.1);
}

Chrome 中的模糊缩小图像

Blurry downscaled images in Chrome

html

css

firefox

google-chrome

gravatar

更新

tl;博士

完整答案