我正在使用gravatars，经常需要使用css对它们进行缩小。我相信谷歌浏览器以前一直能够正确地进行缩小（我可能错了，不确定问题开始发生的时间），但现在，在 Chrome 中缩小图片会使其变得模糊，而在 Firefox 中则会缩放得很好。我尝试了使用 image-rendering，但它并没有解决问题。有人能给我一个提示，最佳的解决方法是什么？
示例可以在这里找到，请在 Chrome 和 Firefox 中打开，应该会在 Chrome 中比在 Firefox 中更加模糊。
谢谢
Chrome中模糊的缩小图像
81
- NoDisplayName
5
12个回答
163
我在Mac上发现了同样的问题：Firefox能够很好地缩小图像，而Chrome会使其看起来模糊不清，这非常糟糕。
我并不关心渲染时间或速度，我需要标志看起来好！
我找到了以下CSS规则，可以修复Mac上的Chrome。
image-rendering: -webkit-optimize-contrast;
- pastullo
15
3“saved my day”的意思是“救了我的一天”，这个规则也适用于背景图片。奇怪的是，谷歌浏览器在没有这个规则的情况下缩小PNG图片时效果很差。 - low_rents
8注意：这会导致我的图像在Safari中出现锯齿/像素化。 - benjarwar
3在我的 Mac 上使用 Chrome 64.0.3282.186，这对我不起作用。 - Badger
3@Badger 你可能想尝试使用
image-rendering: pixelated; - Chris S.52020年仍然存在该问题，这个答案在Chrome 83上仍有帮助。 - manroe
显示剩余10条评论
25
我发现使用transform: translateZ(0);是有效的。
与类似的问题相似：如何防止Chrome在调整图像大小时模糊?
- liujigang
3
你能提供一下为什么这个解决方案可以解决问题的信息吗？ - shaedrich
已测试适用于基于Chromium的浏览器（已测试Chrome、Edge和Brave）。根据这篇文章，它可以通过3D硬件加速/GPU进行渲染，但可能会导致CSS动画出现问题，因此最好谨慎使用。https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css - Daniel Lemes
1之前一直很顺利，包括Chrome 81在内都能正常工作。但是在82和83（dev）版本中似乎无法使用了。 - mbw
15
似乎
以及标志上文字的近距离照片：我认为Firefox的渲染明显更好，但优化对比度确实有所帮助。
transform: translateZ(0);不再起作用了。
我发现唯一有影响的属性是image-rendering: -webkit-optimize-contrast;（注意：在iOS Safari上，它会使图像变得非常像素化，所以你只需要在Chrome和Edge上启用它）。
这里使用此图像进行比较：<img src="https://istack.dev59.com/acaio.webp" style="width: 244px; height: 244px;">（在Windows 10上）。
以及标志上文字的近距离照片：我认为Firefox的渲染明显更好，但优化对比度确实有所帮助。
- 12Me21
2
37我被这在2021年仍是一个问题所震惊。 - Alex
5我怀疑最近已经移除了
-webkit-optimize-contrast。现在它似乎没有任何效果（在Linux上测试了 Microsoft Edge 浏览器版本 99.0.1150.11）。 - 12Me2114
更新
我之前没有意识到使用 2x 后的图像尺寸与目标尺寸匹配，并且浏览器没有缩小。这种解决方案仅适用于可以使用固定大小容器来存放图像的情况。
简而言之
设置图片比例，Chrome 将正确缩小。已在 Chrome 84 中进行了测试。
重要部分是在末尾使用 2x 的 srcset。
<img srcset="image-2x.png 2x" alt="alt">
完整答案
我尝试了image-rendering: -webkit-optimize-contrast。这可以改善Chrome中呈现的图像，但也会在Safari中给我一个糟糕的版本。
起初，我需要缩小图片，因为Retina显示器仍然需要2倍大小的图片（否则放大可能会看起来模糊）。所以我决定创建两个版本（1x和2x）。
在添加了两个版本之后，我发现如果只使用原始的2x图像，但在srcset中指定2x，那么图像就不会再变得模糊了。
- rareyesdev
4
1这实际上是正确的方法，可惜你的答案被踩了 ¯_(ツ)_/¯。 - Esteban Rocha
这对我很有帮助，而不是上面答案中的“image-rendering”。点赞了这个回答，因为不知道为什么会被踩。 - Jrn
1在2021年，这确实需要被接受为解决此问题的正确答案。 - Nickfmc
在我的情况下，使用缩放的srcset对我没有起作用。 - r g
8
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;
}
}}
- GoojajiGreg
7
在 Windows 的 Chrome 上使用 will-change: transform;，在 Mac 上使用 image-rendering: -webkit-optimize-contrast;
- Alexander Orlov
1
1更新：不要在包含大量图像的页面上使用
will-change: transform;。该功能使用GPU来渲染图像，可能会减慢浏览器的速度。 - Alexander Orlov4
在Chrome中，使用transform: translateZ(1px);解决了我的问题，而不会在其他浏览器上产生视觉影响。
- Fabian
4
这将在Chrome中缩放图像时为您提供清晰锐利的图像。您需要同时使用translateZ(0)和scale而不是（1）。
img {
border: none;
display: block;
transform: translateZ(0) scale(0.999999);
}
但如果使用任何悬停缩放效果，请确保再次添加translateZ(0)。
例如：
img:hover {
transform: translateZ(0) scale(1.1);
}
- kiddac
3
我可能会完成这个线程。
我发现一个bug（或者也有可能是一个特性）。
如果你用CSS将一个500px x 500px的位图图片（例如JPEG格式）缩小到63px x 63px的正方形，结果在Chrome Version 97.0.4692.99或我电脑上任何基于WebKit的浏览器中都非常模糊。 （Opera，Edge）但不包括Firefox。
更改为64px x 64px，结果就好多了。
我认为WebKit认为小尺寸的图片不重要，因此可以使用不同的、更快但更模糊的算法进行缩放。
如果您将网站上的标志缩小到63px或60px，请考虑将它们稍微放大一点。在检查器中测试以验证渲染是否令人满意。
欢迎大家！
- RomainFromCM
1
1谢谢，我看了所有的答案，但都不适用于我。 - Malindu Sasanga
2
我建议采用另一种方法，因为我也遇到过同样的情况：在Chrome浏览器下图像稍微模糊，但是在Firefox下完美无缺。按下
Ctrl + "0"可以解决这个问题。有一天我使用了缩放功能(Ctrl + "+"或"-")，但没有完全重置它...该问题得以解决。"最初的回答"。- delaio
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
image-rendering不起作用”如果我们不知道您使用的值，那么并没有太大帮助（特别是因为它在被接受的答案中使用）。 - shaedrich