Проблемы с качеством изображения с уменьшенными изображениями в Chrome, но не в Firefox?

Question

У меня есть большие изображения (728px на 546px), которые мне нужно масштабировать в браузере (до ширины: 179 пикселей и высота: авто).

Когда я делаю это в 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

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