Firefox blurs an image when scaled through external CSS or inline style.

Question

When I visually scale an image, Firefox 3 blurs it. Firefox 2 and other browsers don\'t, which is the behavior I expect. This is especially lame for creating a web based gam

Answer 1

I was just wondering about this myself, but it seems it's hardcoded in ff3 :( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845

ff2 didn't do any interpolation

IE doesn't by default, but you can turn it on: http://www.joelonsoftware.com/items/2008/12/22.html

Answer 2

You should avoid scaling the image on the clientside. Scaling an image upwards is like zooming, the browser doesn't have the information for the image to display it in higher resolution than it really is, so you can't do that without bluring the image, maybe it's not noticebale in IE, try changing 200px to 400px.

Answer 3

Internet Explorer 8 also "blurs" images by default when scaling them. This is actually a good thing. Most images look better when scaled using bicubic sampling instead of nearest neighbor sampling.

If you want Internet Explorer 8 to scale images like previous versions do, put this in your CSS:

-ms-interpolation-mode: nearest-neighbor;

If you want Internet Explorer 7 to scale images like IE 8, use this:

-ms-interpolation-mode: bicubic;

Other than the looks of the image, you also have to consider performance. I've found that IE 7 and IE 8 need significantly more CPU power to scale images when using bicubic sampling than Firefox 3.6.