Image Downscaling with CSS … Images Are Blurry in Several Browsers

Blurry downscaled images in Chrome

I found the exact same issue on Mac: Firefox downscales the image really well, while Chrome makes it look blurry, which is very bad.
I couldn't care less about rendering time or speed, I need the logo to look GOOD!

I found the following CSS rule fixing Chrome for Mac

image-rendering: -webkit-optimize-contrast;

Making a large image smaller using CSS (downscaling) results in blurry images in IE9, FF, but fine in Chrome

Generally you shouldn't do this, reason being is the user will download the larger image.

Imagine you have a 2Mb image you want to show on a website, the user would have to download the 2Mb file just to view the smaller image. It is best practice to resize the image and create a thumbnail link.

As for the issue it is the browser rendering that is the issue, As far as I know there is no alternative to this.

Image scaling causes poor quality in firefox/internet explorer but not chrome

It seems that you are right. No option scales the image better:

http://www.maxrev.de/html/image-scaling.html

I've tested FF14, IE9, OP12 and GC21. Only GC has a better scaling that can be deactivated through image-rendering: -webkit-optimize-contrast. All other browsers have no/poor scaling.

Screenshot of the different output: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Update 2017

Meanwhile some more browsers support smooth scaling:

ME38 (Microsoft Edge) has good scaling. It can't be disabled and it works for JPEG and PNG, but not for GIF.
FF51 (Regarding @karthik 's comment since FF21) has good scaling that can be disabled through the following settings:
```
image-rendering: optimizeQuality
image-rendering: optimizeSpeed
image-rendering: -moz-crisp-edges
```
Note: Regarding MDN the optimizeQuality setting is a synonym for auto (but auto does not disable smooth scaling):

The values optimizeQuality and optimizeSpeed present in early draft
(and coming from its SVG counterpart) are defined as synonyms for the
auto value.
OP43 behaves like GC (not suprising as it is based on Chromium since 2013) and its still this option that disables smooth scaling:
```
image-rendering: -webkit-optimize-contrast
```

No support in IE9-IE11. The -ms-interpolation-mode setting worked only in IE6-IE8, but was removed in IE9.

P.S. Smooth scaling is done by default. This means no image-rendering option is needed!

transform scaleing down makes image blurry

Add the following CSS to your img element (Not a safe hack cross-browser-wise):

img {
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
   image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

Snippet below:

.container {  transform: scale(.95);  transition: transform 70ms ease-in;  float: left;}.container:hover {  transform: scale(1);}img {  image-rendering: -moz-crisp-edges; /* Firefox */  image-rendering: -o-crisp-edges; /* Opera */  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */  image-rendering: crisp-edges;  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */}

<div class="container">  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" /></div><div class="container">  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" /></div>

Will PNG image lose quality when resized using HTML or an APP

Try it out and see if you can tell a difference.

If the image has a lot of details, you should be able to tell "the-resized-png-image.png" would look worse than the original. Now, this is assuming my past experience with chrome, the quality may vary from browser to browser due to differences in the way they downscale images.

There is also a possibility of browsers changing the way they downscale images in updates, so it may also vary with browser versions.

Here are other questions that are consistent with my findings:

Why does image lose quality when resized on the source but does not when resized using html
Make Firefox image scaling down similar to the results in Chrome or IE
Blurry downscaled images in Chrome
Has image downscaling improved in Safari 6 and 7? (5 used to be slightly blurred)

Doing your own downscaling:

HTML5 Canvas Resize (Downscale) Image High Quality?

So, to answer your question: Depends on the browser/app.