Smooth Image Scaling in IE Via CSS

Wednesday, 22 April 2009

I came across this clever little CSS snippet for the first time today:

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

If you've ever had to use client-side image resizing you've almost certainly run into this issue: IE completely mangles images resized via CSS or height and width attributes. As a general rule you'll probably want to stay away from resizing images from within the browser, but there are cases where it just makes sense. For example, often times I'll have to reuse a user's avatar but at a slightly smaller size for a list or grid. It doesn't make sense to resize the image and save (and manage!) another copy, so I'll just resize it from within the browser itself. Up until now this was done with the knowledge that IE's resizing of said image would result in a horribly pixelated version of the image but it was an annoyance that I was willing to live with since it's just so convenient. And well, I don't use IE, so it was out-of-site, out-of-mind.

Luckily this little snippet is easy to implement and brings quality in-browser image resizing to IE. Be sure to check out the example images at CSS Tricks to see why this seemingly minute detail is important to the overall feeling of quality for a site.