Tip: High quality CSS thumbnails in IE7

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

<img src="pic.jpg" alt="This image is really 500x500 big" class="thumb" width="50" height="50" />

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.

Displaying only a subset of the comments. Click here to display all comments.

  1. Keith about 1 year ago
    Reply

    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.