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. Tom about 1 year ago
    Reply

    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 about 1 year ago

      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.