Smooth Image Resizing
Posted on: 22/05/2010
Altering an image size within the css or html so that the browser is left to resize it is not recommended, but in some cases it is a must. While most browsers don’t have too much of an issue with this, the ever lovable Internet Explorer does and will often make resized images pixelated.
However hope is not lost as there is a very simple work around to make IE play nice and resize the image smoothly, just add this to your css file:
img {
-ms-interpolation-mode: bicubic;
}
3 Comments
Nice trick pixie.
Only problem with that, is that it invalidates the css file.
Of course, if that’s not an issue, then definitely a useful little snippet
Feel free to add it to the snippet board on the forum, with a link to this post of course!
I think validation is important, however sometimes if you want things to play nice you have to do something against the standards set out to get that to happen.
So if valid CSS is important then the easiest way to make sure images aren’t pixelated is to not rely on the browser to resize them, think of this trick as a last resort if there is no alternative but to resize through the browser and you want the images to look the best they can
Great snippet, but a shame it doesn’t work for IE6