Aaron Pearson

I’ve always been annoyed with how IE7 does image scaling. If you have an image that’s 100 X 100 and resize/scale it with HTML to 70 X 70 Internet Explorer doesn’t resample the image so it winds up looking “blocky”. I ran across a page on Flickr’s Developer Blog that describes a little known CSS command that will cause IE7 to do bicubic resampling of HTML scaled images. If you use a Mac, both Firefox and Safari do bicubic resizing automatically…. The way to apply this to every image on your page in CSS:

<style>

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

</style>

IE7 example:

Original Image Size

Image Scaled with HTML to 100px width:

Image Scaled with HTML to 100px – Bicubic Resampling:

For IE6 You have to get a little crazy for minor improvement…


<span style="position: absolute; z-index: 100; width: 100px; display: inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.google.com/intl/en_ALL/images/logo.gif',sizingMethod='scale');"><img style=" filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="http://www.google.com/intl/en_ALL/images/logo.gif" border="0" alt="" width="100" /></span>


For more information on this IE6 fix check out Microsofts site: http://msdn.microsoft.com/en-us/library/ms532969.aspx

@Alex Glover
Full Size:


Bicubic is not working because the image you are using is a PNG:

Image saved as GIF:

Image saved as JPG:

You will need to save all your “spotlight” images as JPG and make the background color the same as the background of the site, or re-size the image to the exact dimensions you need.