在Chrome中模糊缩小图像

Question

我正在使用gravatars,而且经常在我用css缩减它们的时候,我相信Google Chrome直到最近才能正常使用它(我可能错了,不确定问题何时开始出现)但是现在,图像变得模糊了缩小尺寸,这种情况只发生在Chrome中,FF缩减相当不错.我试过使用,image-rendering但它没有解决问题.有人能给我一个暗示,最好的办法是什么？

这个例子可以在这里找到,在Chrome中打开,然后在FF中,在Chrome中比在FF中更加模糊.

谢谢

Answer 1

我在Mac上发现了完全相同的问题:Firefox很好地缩小了图像质量,而Chrome使它看起来很模糊,这非常糟糕.我不太关心渲染时间或速度,我需要徽标看起来很棒!

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

image-rendering: -webkit-optimize-contrast;

Answer 2

我发现使用的transform: translateZ(0);是工作。

通过类似的问题？ /sf/ask/2754304031/

Answer 3

看来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 4

更新

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

太长了；博士

设置图像比例，Chrome 将正确缩小比例。在 Chrome 84 中测试。

重要的部分是最后使用srcsetwith 。2x

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

完整答案

我试过image-rendering: -webkit-optimize-contrast。它改进了 Chrome 中的渲染图像，但也给我带来了 Safari 中图像的糟糕版本。

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

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

Answer 5

Pastullo 的答案完全image-rendering修复了 Chrome 上的图像模糊问题，但图像在 Safari 上会出现像素化。这种媒体查询组合帮助我在 Chrome 29+ 上设置该属性并在 Safari 11+ 上取消设置：

@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 6

在适用于 Windows 和Macwill-change: transform;的 Chrome 中使用。image-rendering: -webkit-optimize-contrast;