See http://jsfiddle.net/aJ333/1/ in Chrome and then in either Firefox or Internet Explorer. The image is originally 120px, and I'm scaling down to 28px, but it looks bad pretty much no matter what you scale it down to.
The image is a PNG and it has an alpha channel (transparency).
Here's the relevant code:
HTML:
<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
<img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>
CSS:
a {
width: 28px;
height: 28px;
display: block;
}
img {
max-width: 100%;
max-height: 100%;
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: bicubic;
}
The image-rendering
and -ms-interpolation-mode
lines of CSS didn't seem to do anything, but I found them online while doing some research on the problem.
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!