IT IS HERE! Get Smashing Node.JS on Amazon Kindle today!
Show Posts
← Back to homepage

IE7 supports a custom bicubic resampling mode for images. Before, resizing a 500×500 image like this:

This image is really 500x500 big

would produce a horrible result in IE, with noticeably lower quality in the resized version.

This is easily fixed in IE7 by applying the following property to the img tag:

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

Go to this demo page for a Flickr picture example.


Wow, that’s really good! Didn’t know about this…


The HTML bit above doesn’t have the class of “thumb”, so the CSS would miss that image, but I think we get the drift =)

That absolutely works and is a great reminder!

    Guillermo Rauch said

    Fixed =)

Matt said

Wow. Really great tip.

Keith said

Cool tip! I was actually just working on this sort of thing yesterday.

Any idea why firefox is giving me a black border on the top and left when I do the same thing? I’ve got a white image on a white background, so this is obviously unacceptable. I’m guessing it’s a linux-specific bug, but I haven’t tested cross-platform yet.

Event though I believe scaling images with html is a forbidden sin, this might come in handy one day. Thanks!

Ben said

Yeah, this may be a cool trick, and props for finding it out and sharing it, but we all know that this is a big no-no as far as web design is concerned. What about every other browser people will be viewing your site with? Those images are gonna look awful. Just make a smaller version in photoshop. Or better yet, dynamically create them with PHP.

    Guillermo Rauch said

    I wouldn’t agree. Most modern browsers (Safari, Opera, Chrome, Firefox) resample your images while keeping high (almost GD2-like) quality.

    This can be extremely useful for a wide range of scripts. For example, slideshows that display thumbnails at the bottom. If the images are going to be eventually displayed at full size, why would you produce 2x the number of images and HTTP requests ?

    I’ll update the post with a link to an example

    Keith said

    I would only suggest doing that if you’re only displaying a handful of thumbnails per page. Otherwise the user is going to have a long load time just to see thumbnails (not to mention how much bandwidth you’re wasting on a user who only clicks through to a couple full-sized images).

Tom said

I modified the code to comment out the “img.thumb { -ms-interpolation-mode: bicubic; }” bit, and the page rendered exactly the same in Firefox…

    Guillermo Rauch said

    The point is to show that modern browsers are capable of producing GD or Photoshop-like quality thumbnails. Of course it won’t do anything in FF! It’s for IE7 resampling to look like Firefox’s or Safari’s.

CentDev said

Interesting. I never knew this existed. Kudos for the little gem.

Glook said

Work fine in IE7, but not in IE6? How fix it in this browser too?

    Ben Kondes said

    Since that browser’s going dead in the next few months, let’s not worry about that.

Oman said

Very helpful and cool. Is there anything similar for improving the quality of dynamically down-sized images in Firefox?

Oman said

Ok, nevermind…Firefox 3.6+ uses this:

image-rendering: optimizeQuality;

alex fischer said

This is not working with a png image how can i fix it?

Thanks a lot!

I never knew about this feature (or is it a bug) of the IE.

Your thoughts?

About Guillermo Rauch:

CTO and co-founder of LearnBoost / Cloudup (acquired by Automattic in 2013). Argentine living in SF.