Poor quality downsized image in IE9

Question

I noticed that IE9 renders downsized images in a very low quality: if I display a 800x600 jpg image in a 200x150 IMG tag, the result in IE9 is very disappointing.

The same page displays perfectly fine in IE8 and in Chrome. IE7 is also OK, provided I use CSS style -ms-interpolation-mode: bicubic;). Firefox shows the same dismal result as IE9 but this seems to be a known bug, see https://bugzilla.mozilla.org/show_bug.cgi?id=486918

I have trawled Stack Overflow and other forums but haven't found any complaints on IE9 rendering versus IE8.

Does anybody know this a bug in IE9. Is there a workaround?

I cannot submit images, because I am a new user on Stack Overflow. But you can easily reproduce the issue:

In Paint.Net create a 800x600.jpg with an ellips with brush-width 1 or 2. Display this image in a 200px by 150px IMG tag Compare IE9 with Chrome and IE8 (using IEtester)

Answer 1

The default ie image resize algorithm is not very good. As you note, IE7 added the ability to change the algorithm with:

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

This is taken away in IE9 according to the docs page, but they don't provide any info on what if anything to use instead. If you can manage to resize the image not in the browser you will get the best results that way.

Depending on your use case, you might be able to use a canvas with newer browsers to get better results. The accepted answer in Resizing an image in an HTML5 canvas looks promising :)

Answer 2

I've seen this a lot with IE and image resizing. You're honestly better off making a separate smaller version the exact size through an image editor or automated means.