Image scaling browser issue. HOW TO fix it in a simple way?

Have you ever wondered why your pictures in IE or FF looks really crappy. If your answer is “yes” then read this article and learn how to fix that issue.

If you ever use width and height style to scale your pictures by css probably you have noticed  that in IE(6,7) or FF, those image don’t look good. There is a very simple way to fix this problem.

At the beginning of your css you can simply add:

img{
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
}

-ms-interpolation-mode: bicubic; markup is responsible for better scaling in ie6 and IE7, in IE8 this problem is resolved.

Unfortunately image-rendering: optimizeQuality; markup will work form FF3.6.

For more information please visit:

https://developer.mozilla.org/En/CSS/image-rendering

http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx