CSS

Smooth Image Resizing

Posted in CSS, JavaScript, Notebook on April 21st, 2009 by kai – Comments Off

I recently stumbled upon a great solution to a problem that I’ve seen for years, smooth image resizing in a web-browser or fluid images. The article was written by Ethan Marcotte (Unstoppablerobotninja.com). Most modern browsers handle resizing of images very well, including FF3, Chrome, Safari and IE8. Not surprising the browsers that don’t do a good job include IE 7 and below. Via some JavaScript, CSS and a special Microsoft CSS property filter (AlphaImageLoader), resizing looks good!

Try opening the links below in IE6 or IE7. The first link is the original and the second includes fixed image scaling.

Before Fix …. After Fix

Here is a before and after zoomed in image of the fix.

I will continue testing this technique with more images and text of different contrasts and colors but as of now, the technique looks very promising.