Firefox blurs the image when scaling through external CSS or inline style.

Question

When I visually scale an image, Firefox 3 blurs it. Firefox 2 and other browsers do not, this is the behavior that I expect. This is especially inconvenient for creating a web game using png or gif sprites.

For example, when displaying a 100x100 image in Firefox 3, for example:

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

or

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

it looks blurry in FF3, not IE.

Any ideas on how to prevent this?

Answer 1

I discovered this new FireFox feature:

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

So, put this in your CSS, fix it:

 image-rendering: -moz-crisp-edges; 

I think I would share this information. Sorry for the answer to my own question;)

Answer 2

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

ff2 did not perform any interpolation

IE does not work by default, but you can enable it: http://www.joelonsoftware.com/items/2008/12/22.html

Answer 3

You scale the image compared to its original size - the desired effect usually has a smooth zoom, and it seems that FFX3 started to do this (I assume bilinear filtering). I think that if you look at Safari and Opera, you will find that they also filter the image.

Answer 4

http://developer.mozilla.org/En/CSS/Image-rendering applies only to the current lines of the prefabricated Firefox boxes (Minefield / 3.6a1pre / Gecko 1.9.2). This feature is not in Firefox 3.0 and will not be in the upcoming version 3.5. The first release with this option will be the next major release after 3.5 is currently in the early stages of planning with an expected release in 2010.

Answer 5

Internet Explorer 8 also blurs images by default when zoomed. This is actually good. Most images look better when zoomed using bicubic sampling instead of sampling nearest neighbors.

If you want Internet Explorer 8 to scale images like in previous versions, 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; 

In addition to the appearance of the image, you must also consider performance. I found that IE 7 and IE 8 require significantly more processor power to scale images using bicubic sampling than Firefox 3.6.

Answer 6

I really prefer how FF does it, since it uses interpolation when scaling images, in most cases it makes images much better than in IE. However, I assume that there may be times when this is not good, for example, when using sprites.

I don't think there is a way around this though.

Answer 7

Unfortunately, I do not have a solution for this, but it is a complete parser for a large number of users (for example, pixel artists). If you are affected, please send feedback to http://hendrix.mozilla.org/ and vote for the corresponding error .

It is disappointing that Mozilla ignores this problem. For many affected users, this means that there is no choice but to switch browsers. IE has a CSS property to select a resize filter, so this is apparently the best choice.

Here is the error report for Google Chrome, which has the same problem as Firefox. I do not know about Opera, but I heard that they use some heuristics for cleaner automatic scaling.

Answer 8

I wonder if you would get better results, if you created the sprites in the largest size that you expect from them, and then scale them as needed?

Answer 9

You should avoid scaling the image on the client side. Scaling an image up is like scaling, the browser does not have information for the image to display it in a higher resolution than it actually is, so you cannot do this without masking the image, it may not have noticed that in IE try changing 200px up to 400px.