Fixing Pixelation from Scaled Images in IE

A project I worked on recently called for a carousel with five images of different sizes — somewhat like a “light” coverflow. I ended up building it with basic <img> tags that get scaled by javascript which modified the width attribute.

Cover Slider Layout

One of the problems that I ran in to involved the loss of quality from Internet Explorer 6 and 7 when the browser renders the image at a smaller dimension than the file.

An image scaled in internet explorer.

This project was for a site that still has a substantial amount of visitors using IE6 (and IE7′s scaling abilities are not much better than 6). So I needed to come up with a way to correct the image scaling. A short google later, I found Ethan Marcotte‘s blog post Fluid Images [via Unstoppable Robot Ninja] and a post on flickr’s developer blog.

It turns out that the Microsoft AlphaImageLoader used to support transparent pngs in IE6 will also cause the browser to use a better engine to render scale.

Here is how I fixed scaled images for IE6:

// apply AlphaImageLoader in IE6 for better image scaling
var broswerVersion = navigator.appVersion;
if (broswerVersion.indexOf('MSIE 6') >= 0) {
	$('.cover_slider .images img').each(function () {
		var imgSrc = $(this).attr('src'),
			scaledFilter;

		scaledFilter  = "progid:DXImageTransform.Microsoft.AlphaImageLoader(";
		scaledFilter += "src='" + imgSrc + "', sizingMethod='scale'";
		scaledFilter += ")";

		this.style.filter = scaledFilter;
		this.src = '/images/misc/spacer.gif';
	});
}

You use the src from the image in the AlphaImageLoader call, and then replace the src with a transparent “spacer” gif. It’s not perfect, but it is definitely much better.

IE7 is even easier. It can be fixed with a simple MS specific CSS class.

.cover_slider img {
	-ms-interpolation-mode: bicubic;
}