Tip: High quality CSS thumbnails in IE7

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

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.

35 Comments

Amitay Horwitz said

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

Thanks.

Chris Coyier said

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.

Oskar Krawczyk said

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.