Optimising Images for Internet Explorer

Question

On a site of mine, my client is reporting that images that are reduced in size by code (i.e. specified a width/height) are appearing jagged and pixellated. I have asked her what browser she uses and inevitably it's Internet Explorer.

Is there a way to optimise images in IE or do I need to manually resize the images on photoshop before I put them on the site?

The images in question are resized from 220x220 to 80x80 and I have javascript that expands them to 220x220 upon clicking.

Answer 1

Resizing down or up in a browser can look terrible. It varies from browser to browser, but apparently IE is the worst.

It's best to either write a server side script to create thumbnails, or to manually do it yourself if quality of the image is important. It also saves bandwidth as you don't need to load the big image and only display 1/10th of the pixels.

Answer 2

You should avoid using width and height for resizing. It'll cause a longer loading time (on slow connections and big images).

A better idea is making thumbnails (with Photoshop for example) and use the "Web save" option to reduce the size even more.

Answer 3

http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/

Bicubic image resampling is turned off by default in IE. You can use this to turn it on in your reset stylesheet:

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

Answer 4

use timthumb, it will create thumbnails for you, you just need to link to the script, and specify the size of the thumbnail and that's it. http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

i'm using it on one of my sites -> http://iv-designs.org/ you can see the images are clean and not pixelated.

Answer 5

Assuming your images are JPEGs, the easiest option is to use IE7's bicubic image resizing feature, which you can turn on using CSS:

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

Be aware that it's got performance implications (using it a lot will slow the browser down). It also has no effect in IE6, and is no longer needed in IE8.

Another way (which does work in IE6) is to use Ethan Marcotte's wonderful Fluid Images script, which uses some damn clever CSS filters to fix the problem in IE6 and 7. My own variation on the theme fixes the right click problem, but requires jQuery.