Grow your CSS skills. Land your dream job.

IE Fix: Bicubic Scaling for Images

Published by Chris Coyier

Devthought had a little CSS tip the other day that is definitely worth repeating. It's not new, it's just an important little trick to know.

And here it is:

img { -ms-interpolation-mode: bicubic; }

If you use width or height tags to resize images in your markup, IE will ensure they look incredibly awful unless you use this little snippet. In general, resizing images in the browser isn't recommended, but of course there are always exceptions.

Comments

  1. That’s a great tip, Idpnt think ive ever seen an ms vendor extension used before

  2. Permalink to comment#

    heard of bicubic resampling before, never realised IE could do it! thnx!

  3. Permalink to comment#

    oh nice, great little tip!

  4. dario-g
    Permalink to comment#

    Rule no 1. Do not scale images in browser! :)

  5. Permalink to comment#

    This is just AWESOME!

  6. hunter
    Permalink to comment#

    “but of course there are always exceptions.”

    what would one of those be?

    • There’s a lot of gray area when doing client work through a cms, especially with the client who just doesn’t “get it” or understand how to resize images/the benefits (no matter how much education they go through).

      It’s useful when you’re trying to not break the design. Then you can go back and fix the problem without any shocking “my web site is broken!” client freak-outs

    • It helps when you need several sized thumbnails of an image and, because of the CMS you are using, you don’t want to create and manage 5 different copies of the same image. You can scale the thumbnail and have one image download for all instances of that image at slightly different sizes.

      You certainly don’t want to have a high-resolution image squished down, but it does save bandwidth and server calls to reuse small images.

    • Chris C. this Hack just work with .jpg and .gif (without transparecy).

      Thanks for the tip!

    • Text resizing.

      Using EM mesurements for images. In one case I’m working on now I have to create a text resizer and the images need to scale with the rest of the document.

  7. Thanks. That is very useful information. I’ve bookmarked this article and tweeted it.

  8. Thanks a million Chris..
    Never knew such a trick exists..

  9. Johnb
    Permalink to comment#

    Thanks. This would be useful in a gallery… you could get away with uploading only the large version of the image, even for the thumbnail!

  10. Matt
    Permalink to comment#

    I would really like to know who at Microsoft thought this was a sensible default…

  11. Sweet tip!

  12. Ro
    Permalink to comment#

    I actually spent about half a day a few weeks back trying to achieve ‘smoother scaling in IE’ before I stumbled on that same code – what a revelation. While I agree that images should only be scaled in a browser as a last resort, anyone who uses Imageflow or Galleria should definitely include this little gem. Thanks Chris. (And the article by schill on Code.Flickr)

  13. Never heard of this. Great find, Chris!

  14. Jose de Leon
    Permalink to comment#

    IE has a capability (under Internet Options) to load a default style-sheet that is applied to every page. If you create a style-sheet file with this rule in it, and set IE to load this file as a default-style sheet, you can enable bicubic scaling for all images in IE.

  15. Josh
    Permalink to comment#

    Single best CSS trick I’ve gotten from this site.

    Wish I knew about this years ago!

  16. Thanks for the great tip. My business partner has trouble resizing images for her blog post so she just lets Word Press do it. Often they look terrible on IE and I have to clean it up. Not any more! @TraceyHolinka

  17. Permalink to comment#

    That’s a good tip, hopefully IE8 will have that be the default. I can’t imagine why anyone would ever want the current behavior.

  18. Permalink to comment#

    I use a CMS at my workplace, so this could become handy as most of our clients probably resize their images via browser scaling. Thanks CC and Devthought :)

  19. Permalink to comment#

    the “-ms-interpolation-mode” seems to be IE 7 only, you will need a AlphaImageLoader Filter for IE 6.

  20. Permalink to comment#

    What?! I never, ever knew you could do that. Why on earth does IE7 default to not doing this? Is there any legitimate reason why you wouldn’t want an image to scale smoothly?

  21. Chris
    Permalink to comment#

    Great tip!

  22. Permalink to comment#

    It’s nice, but it wont validate on CSS (W3C CSS Validator)

    • Permalink to comment#

      It won’t validate because it’s not valid CSS. It’s proprietary CSS for Internet Explorer. Just like -moz-border-radius is for Firefox.

      If you want to keep your master CSS file clean, put the proprietary CSS in a IE-only stylesheet. Or make a “dirty stylesheet” where all the proprietary styling goes.

  23. Excelent work! Thaks!

  24. Permalink to comment#

    Nice, but: Why would you want to scale an image client-side and not just provide a scaled version from the server?

  25. Permalink to comment#

    I’ve never heard “-ms-interpolation-mode” and I rarely scale images.
    Anywayz…tnx for posting this one. Cheers!

  26. V1
    Permalink to comment#

    How about don’t resize images? it gives a performance hit, and its they will always turn up fucked, NO HACKS NEEDED WHOOHOOO

  27. I never believed in resizing images in the browser but as Josh N. says in his comment, if it’s the same image with just a slight difference in size it makes sense to do it, saving space and bandwidth.

    Cool little tip. Thanks for sharing!

  28. Excellent! But I noticed it doesn’t work too well or at all in IE6 anybody else noticed this?

  29. That’s the best tip I could ever have since some time, since a lot of portuguese still use IE out of ignorance.

    Pretty simple and yet very powerful tip!

  30. Thanks, Great tip.

  31. Curtis
    Permalink to comment#

    Unfortunately, this seems to cause some performance issues (especially when paired with JavaScript).

    But a good, quick fix when used sparingly.

  32. Nice one Mr Coyier, really useful when you can’t guarantee all of the images will be resized properly by the client.

    Cheers

  33. Great tip man, thanks for mentioning it!

  34. Max
    Permalink to comment#

    Great tip, is there a way to do this for PNG?

  35. Jon
    Permalink to comment#

    JohnB hit the nail on the head… I’m currently creating a javascript gallery that, when viewed on machines without JS enabled, will resize my images via the HTML, so that I can display them nicely within my layout.

    When the javascript kicks in, it just grabs all the images, replaces the size in each image tag and assembles my gallery elsewhere on the page.

    Incredibly handy. Thanks for this tip!

  36. great tips, so useful for me

  37. Neat tip!

    For a different take on how to integrate large images within websites check out the Inline Multiscale Image Replacement technique:
    http://gasi.ch/blog/inline-multiscale-image-replacement/

    As a nice side-effect, you can publish large images at any size you might have without having to pay a bandwidth premium.

    Even though it is somewhat piggy-backing on Flash it perfectly degrades in situations where Flash is not available.

    As it’s still quite rough around the edges, I’d love to hear your feedback!

    -Daniel

  38. Permalink to comment#

    Good, but not work in IE6.
    Thanx, anyway.

  39. muckluck

    It does nothing in my IE6 :(

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".