Chrome 上缩小图像的图像质量问题，而不是 Firefox 上的图像质量问题？答案

【问题标题】：Image quality issues with downscaled images on Chrome but not Firefox?Chrome 上缩小图像的图像质量问题，而不是 Firefox 上的图像质量问题？
【发布时间】：2017-06-22 01:44:01
【问题描述】：

我有需要在浏览器中缩小尺寸（宽度：179 像素和高度：自动）的大图像（728 像素 x 546 像素）。

当我在 Firefox 中执行此操作时，结果看起来很棒。但是，当我在 Chrome 中执行此操作时，完全相同的代码和图像看起来会有所不同，而且要差得多。

有什么技巧可以让缩小后的图片在 Chrome 中看起来更好看？

这是一个 Fiddle 示例...如果您查看前景中的树叶或前甲板舱口，您会发现它们在 Firefox 中看起来好多了：

<img src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' style='width:179px;height:auto' />

https://jsfiddle.net/qr067gg9/

这里也是两张并排的截图：

http://i.imgur.com/J0T2GeY.png

【问题讨论】：

可以确认这仍然是 Chrome 的问题。 Firefox，因为它的缺点，在渲染图像方面做得更好。
仍然是一个问题，就我而言，如果我缩小有损压缩 jpeg 的比例，它会变得过于像素化，对于带有文本的图像来说是最糟糕的。

标签： html css image cross-browser scaling

【解决方案1】：

这似乎是 Chrome 中的一个错误。见here

this 问题的可能解决方法：

img {
  width: 179px;
  height: auto;
}

.crisp {
  image-rendering:-webkit-optimize-contrast;
}

<img src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' />

<img class="crisp" src='http://www.wisconsinrivertrips.com/wp-content/uploads/2014/10/DSCN0544.jpg' />

【讨论】：

感谢您的建议。我确实尝试过“image-rendering:-webkit-optimize-contrast;”，但在大多数情况下，小图像变得过于锯齿状，所以这不起作用。 Firefox 图像看起来仍然要好得多。
您是否考虑过根据媒体查询以自然分辨率加载多种图像尺寸？换句话说，浏览器没有调整任何大小。
是的，我已经考虑过了。然而，由于种种原因，不幸的是，这对我来说是不可行的。
很公平，我想如果这是一个错误，那么没有太多的选择。祝你好运
真的是bug吗？他们为什么不修呢？无论如何，这确实有效