Smooth image resizing in Internet Explorer with CSS

With the advent of Firefox 3, which introduced the Cairo image library to its rendering engine, web developers now have access to smooth image scaling within the browser. This means you can take an image larger than you need and resize it with CSS to fit – especially useful in producing fluid expandable layouts for variable resolutions [more on that another time].

Sadly there’s always a caveat, and as usual that caveat is Internet Explorer. The dynamic image scaling in IE has always been ugly.
After some application of google-fu to solving this problem, I discovered a fix for IE7. There is a little-known proprietary setting (isn’t there always!) – that for some reason wasn’t applied as the default – that allows you to access the ‘interpolation mode’ of the browser resize.

The page at MSDN explains the two methods of use – an MS proprietary CSS selector:

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

And the Javascript method:

object.style.msInterpolationMode = “bicubic”;

If for some reason you like the terrible standard rendering method, you can of course set these values back to ‘nearest-neighbor’.

There are still some issues with this method. Firstly it doesn’t seem to work on png at all (see tux below). Secondly, it can end up rendering some gifs a bit too smooth (see MCFC badge below). For me it’s at its best when resizing jpegs (including scaling up!), and most noticeable when they’re Jpegs with text. The Lolcatters will be happy.

So – a quick demo for those of you browsing in IE7 – here’s some samples in Jpeg, gif and png format, with text and images to demonstrate the difference this makes. In the example I’ve used inline styles, but to implement this in general you would just put the following in your stylesheet:

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

If you don’t have access to IE7, here’s a screencap of the example.

Jpeg

50% Scaling



Regular
Bicubic

100% Scaling



Regular
Bicubic

Gif

50% Scaling



Regular
Bicubic

100% Scaling



Regular
Bicubic

125% Scaling



Regular
Bicubic

Png

50% Scaling



Regular
Bicubic

100% Scaling



Regular
Bicubic

125% Scaling



Regular
Bicubic

In Firefox 2 this should still look ok, and will be great in FF3. For those of you still in IE6 land there’s nothing I can do for you. The lack of PNG transparency, and apparently only a 15% market share means I’ve abandonded IE6 for non-commercial projects – hell you must be used to seeing a pretty ugly web anyway. The hacks that exist to ‘fix’ IE6 are too cludgy to use without a financial reason.

This fix will be useful for usage in anything with lots of random sized images – such as in my CSS Vertical Align ‘neat thumbs’ example.

Related posts:

1. Cross Browser CSS Vertical Align

Tags: browsers, CSS, design, IE, images