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. Oman 8 months ago
    Reply

    Ok, nevermind…Firefox 3.6+ uses this:

    image-rendering: optimizeQuality;