我正在使用gravatars而且当我用css缩减它们时我常常这样做，而且我相信谷歌Chrome直到最近才能正常使用它（我可能错了，不确定问题何时开始发生）但是现在，缩小尺寸时图像变得模糊，而这只发生在Chrome中，FF缩减相当不错。我尝试使用image-rendering，但它并没有解决问题。有人能给我一个暗示，最好的方法是什么？
可以找到示例here，在Chrome中打开，然后在FF中，Chrome中的内容应该比在FF中更加模糊。
谢谢
答案 0 :(得分：57)
我在Mac上发现了完全相同的问题：Firefox很好地缩小了图像质量，而Chrome使它看起来很模糊，这非常糟糕。 我不太关心渲染时间或速度，我需要徽标看起来很棒！
我发现以下CSS规则修复了Chrome for Mac
image-rendering: -webkit-optimize-contrast;
答案 1 :(得分：14)
我发现使用过的 transform: translateZ(0); 是有效的。
通过类似的问题：https://stackoverflow.com/questions/39347200
答案 2 :(得分：2)
Windows 版 Chrome 使用 will-change: transform;，Mac 版使用 image-rendering: -webkit-optimize-contrast;。
答案 3 :(得分：0)
我发现解决此问题的最佳方法是使用svg。另一种选择是使用css媒体查询来加载自适应图像大小。
答案 4 :(得分：0)
我提出了另一条建议，因为我处在相同的情况下：图像在镀铬下略微模糊，但在Firefox上无可挑剔。 Ctrl + "0"解决了这个问题。我不得不一天使用缩放（Ctrl + "+"或"-"），并且没有将其完全重置...
答案 5 :(得分：-2)
我没有意识到使用2x之后的图像大小与目标大小匹配，并且浏览器没有缩小。仅当您可以为图像使用固定大小的容器时，此解决方案才有效。
设置图像比例，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图像，但在2x中指定了srcset，则图像将不再呈现模糊。