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-edgesNote: Regarding MDN the
optimizeQuality
setting is a synonym forauto
(butauto
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!
Poor quality downsized image in IE9
I've seen this a lot with IE and image resizing. You're honestly better off making a separate smaller version the exact size through an image editor or automated means.
Image color differences in different browsers. (Firefox, Chrome, IE)
This has to do with the gamma data that is added to the images. I thinks this is only a mac issue. The image is altered based on the gamma data, and doesn't match the css color values.
The solution you found is the only way to disable this "feature".
If you don't like the command line there is also easy drag and drop tool called PngThing.app for mac. I'm not using windows, so you'll have to google for that.
Related Topics
Highlight the Navigation Menu for the Current Page
Left-Right Movement.. CSS Only Very Generic
Aligning Decimal Points in HTML
Input Type Datetime - Value Format
How to Make a Line Before and After My H1 Tag
Do HTML Websockets Maintain an Open Connection for Each Client? Does This Scale
How to Justify a Horizontal List
How to Hide Drop Down Arrow in IE8 & IE9
Controlling Image Load Order in HTML
How to Set a Background in a Bootstrap Column That Oversizes the Div
Make Link in Table Cell Fill the Entire Row Height
Unskewing the Ends of an Assortment Multiple Skewed Images
Restrict Future Dates in HTML5 Date Input