4

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.stack.imgur.com/wAIAb.png

user2662680
  • 677
  • 8
  • 16
  • Can confirm this is still an issue with Chrome. Firefox, for its faults, does a way better job at rendering images. – Adam B May 03 '18 at 10:45
  • Still an issue, in my case, if I downscale lossy compressed jpeg, it became too pixelated being the worst with images with texts. – Andre Figueiredo Oct 16 '20 at 15:44

1 Answers1

1

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' />
Community
  • 1
  • 1
sol
  • 22,311
  • 6
  • 42
  • 59
  • 1
    Thanks for the suggestion. I did try "image-rendering:-webkit-optimize-contrast;", but in most cases the small images turned out way too jagged, so this won't work. The firefox images still look far superior. – user2662680 Feb 04 '17 at 21:38
  • Have you considered loading multiple image sizes at their natural resolution depending on a media query? In other words, the browser is not resizing anything. – sol Feb 04 '17 at 21:45
  • Yes, I have considered this. However, for an assortment of reasons, this is unfortunately not feasible in my case. – user2662680 Feb 04 '17 at 21:55
  • Fair enough, I guess if it's a bug there aren't a huge amount of options. Best of luck – sol Feb 04 '17 at 22:08
  • is it really a bug? why aren't they fixing it? anyway this does work – Jeff Jan 30 '18 at 18:01