What we are talking about here, is embedding an image into an HTML webpage using the standard <img src="" /> tag - and displaying that image at a smaller size using the width and height attributes of the tag.
Now don't get me wrong. I DO NOT advocate resizing images in the browser. Photoshop or some other image editing software should always be used to resample down for best quality. Not only is the browser resizing an image quality issue, but also there is a bandwidth issue where even though the image may be displayed at a very small physical size on a webpage - it still maintains the file size in KB of the original full sized image.
Still, some web masters may find a need to use one file and resize it on the webpage as needed. Some reasoning may be that where a large image and a small thumbnail are to be displayed on the webpage, the large image will be displayed anyway and so there is only one request and it will be in cache once loaded when used to display as the thumbnail image. Or it may just be the fact that many uninformed or unbending folks looking after their website just want to do it that way. And so that is who and why I am providing this CSS tip for IE resizing.
Now it is fact that most modern browsers have built in bicubic resizing similar to what you would get by resizing in Photoshop, and so when using the img width and height attributes would display with a decent looked downrezed image. However Internet Explorer does not play this game - and the resulting resized image generally looks pretty bad with jaggys and missing information. For IE though there just happens to be a built in function that can be added with CSS to provide the same bicubic resizing as other browsers enjoy - resulting in the same decent quality on screen. Of course you will still be hurt by the large file size when resizing this way.
The CSS to use is
-ms-interpolation-mode:bicubic;That CSS code could be used in a couple of ways - one being in the webpages style sheet or style declaration in the head section of the webpage's HTML code - and the other being including it "inline" as part of the img tag. Here is how it would look in those two uses:
// in style sheet could be assigned to the img tag or to a class
img { -ms-interpolation-mode:bicubic; }
.bicubic { -ms-interpolation-mode:bicubic; }
// styling inline
<img src="pic.jpg" width="80" height="80" style="-ms-interpolation-mode:bicubic;" />
And here is a screen shot taken from IE7 showing the significant difference made by using the CSS bicubic resizing. The 2-750 pixel web images were resized to 40% of their width in the img tag. The left images are what can be expected from resizing in IE, while the right images have the bicubic interpolation applied in the CSS declaration. Looking at the cats wiskers and the lines around the Case logo - the improvement is evident.
