Image Scaling In Internet Explorer

While working on the code for the photo galleries for this Web site, noticed that my photos didn't always look right in Internet Explorer.  Given all the headaches that Internet Explorer has caused me over the years, I figured it was just IE performing poorly.  Little did I know that IE had the ability to look just as good as Firefox, Safari or Chrome but that some designer back at Microsoft had saddled it with an Idiotic Default Setting.

Bicubic vs. Nearest-Neighbor interpolation at 200% magnification

In the Web design world, it is always best to show an image at its original resolution -- that way browsers or Web servers are not scaling the image; you see it just as you saved it.  But the Web is rarely an ideal world.  When working on my photo galleries, I realized that part of the gallery would end up off screen if viewed on a lower resolution display.  To make everything fit, I needed to scale the images if the screen resolution was below a certain threshold.  It was when I started scaling photos that I realized how poor they looked in IE.

There are two common algorithms for changing the size of an image: nearest neighbor and bicubic.  Anyone who has played with resizing images in Photoshop know you always use bicubic.  IE, by default, uses nearest neighbor.  Why?  I can only assume it was an effort to improve performance as bicubic is a more complicated algorithm and, thus, takes more computing muscle.

Fortunately, Microsoft provides us with a workaround: a proprietary CSS style we can set to tell IE to use bicubic interpolation instead:

img {
  /* Silly IE...  Doesn't use bicubic by default... */
  -ms-interpolation-mode: bicubic;
}

If you're using IE to view this site, check out this example.

For those that would like their CSS to validate, use a conditional comments to add an IE7-hacks.css file as such

<!--[if IE 7]> <![endif]-->

UPDATE: Reader Geoff from Down Under points out that none of this works on IE6. He's right: IE6 has no support for bicubic interpolation. The most like reason for this is that computing power at the time of IE6's release (Aug., 2001) wasn't enough to handle bicubic interpolation for everyday Web browsing. If memory serves, bicubic interpolation first made it into Photoshop in version 5.0 which was released around the same time. Those that need to code for the dwindling IE6 population can get some help from Microsoft's AlphaImageLoader, setting the sizingMethod attribute to scale.