Chrome 中模糊缩小的图片

我使用的是 Gravatars，而且我经常用 css 来缩放它们，而且我相信 Google Chrome 直到最近还在使用它(我可能错了，不确定问题是从什么时候开始发生的) ，但是现在，当缩放的时候图像变得模糊了，这种情况只有在 Chrome，FF 中才会发生，而且缩放效果非常好。我尝试使用 image-rendering，但它不能解决问题。谁能给我个提示，最好的方法是什么？

这个例子可以在 给你中找到，在 Chrome 中打开，然后在 FF 中打开，在 Chrome 中应该比在 FF 中模糊得多。

谢谢你

69874 次浏览
小开
最佳答案

我在 Mac 上发现了完全相同的问题: Firefox 很好地缩放了图像，而 Chrome 却让它看起来很模糊，这非常糟糕。 我不能少关心渲染时间或速度，我需要的标志看起来很好！

我发现下面的 CSS 规则修复了 Mac 上的 Chrome

image-rendering: -webkit-optimize-contrast;
小开

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

小开

我提出另一个轨道，因为我在同样的情况下: 图像稍微模糊下铬，但在火狐无可挑剔。Ctrl + "0"解决了这个问题。有一天我不得不使用变焦(Ctrl + "+"或 "-") ，并没有完全重置它..。

小开

更新

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

博士

设置图像缩放，Chrome 就会正确缩放。

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

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

完整答案

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

首先，我需要缩放，因为2倍版本的图像仍然需要视网膜显示器(否则的升级可能看起来模糊)。所以我决定创建两个版本(1x 和2x)。

在添加了这两个，我看到，如果我只使用原来的2x 图像，但与 srcset指定的 2x，然后图像将不再呈现模糊。

小开

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

通过类似的问题: 如何在 Chrome 中防止图像缩放模糊？

小开

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

小开

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;
}
}}
小开

看来 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上) comparison 而标志上的文字特写: 我认为火狐的渲染效果明显更好，但优化对比 是的有所帮助。 close-up comparison

小开

我可能会完成这个帖子。

我发现了一个可以被认为是 bug (或者可能是一个特性)的东西。

如果你使用 CSS 将一个大的正方形位图图像(例如500px x 500px JPEG)中的 logo 缩小到63px x 63px 正方形，那么在 Chrome Version 97.0.4692.99或者我电脑上任何基于 WebKit 的浏览器中，结果都会非常模糊。但不是 Firefox。

改为64px x 64px，结果突然好多了。

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

如果你把网站的 logo 缩小到63px 或60px，可以考虑把它们做大一点。在您的检查器中测试以验证渲染是否令人满意。

不客气！

小开

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

小开

这将给你干净清晰的图像在缩放图像铬。你需要同时翻译 Z (0)和缩放不(1)

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

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

也就是说

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

对我来说，如果我把图像放大2倍，它就能完美地显示出来，而且在 Chrome/MacOS 中可以正确缩放


提交答案