One of the many things that make Internet Explorer "special" is that it doesn't know how to resize images correctly. Particularly annoying is how this affects scaling down images because they become unacceptably jagged.
The problem resides in the interpolation method used by Internet Explorer. Microsoft finally introduced the -ms-interpolation-mode attribute in IE7, which allows web developers set the resampling algorithm of stretched images and correct this problem. Microsoft advices to "Always use high-quality bicubic interpolation mode" in the related article in their Developer Center. Ironically they didn't follow their own advice and set the default to nearest-neighbor, thus you must do it yourself in your CSS. It's actually as simple as:
img { -ms-interpolation-mode:bicubic;}
Not so well documented is the fact that it only works for jpg and gif formats so you must convert your png files.
Is there a solution for IE6, you ask? Well, not exactly, but there is some rather convoluted technique you can apply to improve the final result:
Essentially wrap around your image in a span tag and add the following to your CSS:
span#resize {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/img.jpg",sizingMethod="scale");
}
span#resize img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
This has the effect of making any link within the span tag unclickable. It is ok because the wrapper doesn't have to be a span, you can apply the AlphaImageLoader filter directly to the link tag. At that point you'll run into one more twist. The link is clickable but the cursor will not change to the typical hand when you hover over it. Simply set it yourself in your CSS as in:
a#resize:hover { cursor: hand;}
You gotta love Internet Explorer. After all, without it anyone could create a website and who would need us then?