Firefox blurs an image when scaled through css or inline style.

Question

Hi

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 webbased game using png or gif sprites.

For example, when showing a 100x100 image in firefox 3 like this:

<img src="sprite.gif" width="200" />

or

<img src="sprite.gif" style="width:200px; height:200px;" />

it looks blurred in ff3, not in IE.

Any ideas on how to prevent this?

Answer 1

You're scaling the image up from its original size -- the desired effect is normally to have smooth scaling, and it would appear FFX3 has started doing this (i assume bilinear filtering). I think if you look at Safari and Opera you'll find they also filter the image.

Answer 2

I actually prefer the way FF does it since it uses interpolation when scaling images, in most cases this makes the images look much better than they would in IE. However I guess there can be cases where it's not good, like when using sprites.

I don't think there's a way to get around it though.

Answer 3

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 4

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 5

Unfortunately I don't have a solution for this, but this is a complete dealbreaker for a large number of users (e.g. pixel artists). If you are affected by this please send feedback to http://hendrix.mozilla.org/ and vote for the corresponding bug.

It is disappointing that Mozilla is ignoring this issue. For the many affected users it means that there is no other choice than to switch browsers. IE has a CSS property to select the resizing filter, so this seems to be the best choice.

Here is the bug report for Google Chrome, which has the same problem as Firefox. I don't know about Opera, but I heard that they use some heuristics for a saner automatic scaling.

Answer 6

I discovered this new feature of FireFox:

http://developer.mozilla.org/En/CSS/Image-rendering

So putting this in your CSS will fix it:

image-rendering: -moz-crisp-edges;

Thought I'd share this info. Sorry for answering my own question ;)

Answer 7

http://developer.mozilla.org/En/CSS/Image-rendering only applies to the current trunk builds of Firefox (Minefield/3.6a1pre/Gecko 1.9.2). This feature is not in Firefox 3.0 and won't be in the upcoming 3.5 release. The first release with that option will be the next major release after 3.5 currently in the early planning stages with an estimated release in 2010.

Answer 8

I wonder if you would get better results if you created the sprites at the largest size you expect them to be viewed, and then scale them down as required?

Answer 9

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.