图像质量问题与Chrome浏览器上的缩小图像但不是Firefox？

Question

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

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

在Chrome中制作缩小尺寸的图像是否有诀窍？

这是一个小提琴的例子......如果你看看前景中的树叶，或者前面的甲板舱口，你会发现它们在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

Answer 1

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

来自this问题的可能解决方法：

＆＃13;

＆＃13;

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

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

＆＃13;

<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' />

＆＃13;

＆＃13;

＆＃13;