IE Fix: Bicubic Scaling for Images
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.
That’s a great tip, Idpnt think ive ever seen an ms vendor extension used before
heard of bicubic resampling before, never realised IE could do it! thnx!
oh nice, great little tip!
Rule no 1. Do not scale images in browser! :)
This is just AWESOME!
“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.
Thanks. That is very useful information. I’ve bookmarked this article and tweeted it.
Thanks a million Chris..
Never knew such a trick exists..
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!
I would really like to know who at Microsoft thought this was a sensible default…
Sweet tip!
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)
Never heard of this. Great find, Chris!
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.
Single best CSS trick I’ve gotten from this site.
Wish I knew about this years ago!
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
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.
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 :)
the “-ms-interpolation-mode” seems to be IE 7 only, you will need a AlphaImageLoader Filter for IE 6.
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?
Great tip!
It’s nice, but it wont validate on CSS (W3C CSS Validator)
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.
Excelent work! Thaks!
Nice, but: Why would you want to scale an image client-side and not just provide a scaled version from the server?
You can’t always do that. I think even WordPress scales images.
I’ve never heard “-ms-interpolation-mode” and I rarely scale images.
Anywayz…tnx for posting this one. Cheers!
How about don’t resize images? it gives a performance hit, and its they will always turn up fucked, NO HACKS NEEDED WHOOHOOO
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!
Excellent! But I noticed it doesn’t work too well or at all in IE6 anybody else noticed this?
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!
Thanks, Great tip.
Unfortunately, this seems to cause some performance issues (especially when paired with JavaScript).
But a good, quick fix when used sparingly.
Nice one Mr Coyier, really useful when you can’t guarantee all of the images will be resized properly by the client.
Cheers
Great tip man, thanks for mentioning it!
Great tip, is there a way to do this for PNG?
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!
great tips, so useful for me
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
Good, but not work in IE6.
Thanx, anyway.
It does nothing in my IE6 :(