CODEWITHSUNDEEP
htmlcssimagecross-browserscaling
user2662680
user2662680

Reputation: 706

Image quality issues with downscaled images on Chrome but not Firefox?

I have large images (728px by 546px) that I need to downscale in a browser (to width:179px and height:auto).

When I do this in Firefox, the results looks great. But when I do this in Chrome, the exact same code and images looks different and far inferior.

Is there a trick to making downscaled images look better in Chrome?

Here is a Fiddle example...if you look at the leaves in the foreground, or the front deck hatch you'll see they look much better in Firefox:

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

https://jsfiddle.net/qr067gg9/

Here is also a screenshot of the two side by side:

https://i.sstatic.net/wAIAb.png

Upvotes: 4

Views: 5302

Answers (1)

sol
sol

Reputation: 22919

This appears to be a bug in Chrome. See here

And a possible workaround from this question:

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

Upvotes: 1

Related Questions