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

by

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!

More Related Contents:

  1. Menu does not align correctly in Safari
  2. What is a clearfix?
  3. How do I style a dropdown with only CSS?
  4. How do I auto-resize an image to fit a ‘div’ container?
  5. Fill SVG path element with a background-image
  6. Change color of PNG image via CSS?
  7. Is element block level or inline level?
  8. Style input type file? [duplicate]
  9. Cross-browser custom styling for file upload button [duplicate]
  10. Should I specify height and width attributes for my IMGs in HTML?
  11. Embed image in a element
  12. How to hide image broken Icon using only CSS/HTML?
  13. CSS image resize percentage of itself?
  14. How to get a background image to print using css?
  15. Center image element in parent div
  16. CSS: How can I set image size relative to parent height?
  17. CSS Background image not loading
  18. Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]
  19. How to change an image on click using CSS alone?
  20. How to make images stay within the rows of a css grid container?
  21. How to replace color of PNG image using CSS? [duplicate]
  22. Width 100% with white borders around it. WHy?
  23. How to center a (background) image within a div?
  24. Responsive image align center bootstrap 3
  25. header/footer/nav tags – what happens to these in IE7, IE8 and browsers than don’t support HTML5?
  26. How to place Text and an Image next to each other in HTML?
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. How to make input autofocus in internet explorer?
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment