23

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 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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Martin Kool
  • 611
  • 1
  • 6
  • 9

9 Answers9

36

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 ;)

Martin Kool
  • 611
  • 1
  • 6
  • 9
5

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

pixelbeat
  • 30,615
  • 9
  • 51
  • 60
4

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.

olliej
  • 35,755
  • 9
  • 58
  • 55
2

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.

Jan Goyvaerts
  • 21,379
  • 7
  • 60
  • 72
2

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.

1

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.

Patrik Hägne
  • 16,751
  • 5
  • 52
  • 60
1

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.

nikow
  • 21,190
  • 7
  • 49
  • 70
  • 1
    You should draw your image at the size it's meant to be viewed. If you want to do pixel art with big pixels, then use really big pixels. Firefox 3's behavior does a better job of preserving the actual image shape — when I look at a small JPEG, I don't see a bunch of squares. – Chuck Mar 18 '09 at 16:56
  • What about dynamic changes of image size via JS? What about the increased size of blown up images? For JPEGs bilinear filtering makes sense, but for PNG and GIF it is generally not the right thing to do. This is a major bug, IE shows how to do this right. – nikow Mar 18 '09 at 17:03
  • Why should the compression scheme make a difference? Bilinear or bicubic scaling *is* the right thing to do unless you *want* distortion and pixation. It is closer to the visual perception of the image than nearest-neighbor, which IE uses IIRC. http://www.codinghorror.com/blog/archives/000367.html – Chuck Mar 18 '09 at 18:31
  • 1
    First, this is not about compression, its about making the image appear larger. For most cases bilinear filtering indeed looks better, but there are also many cases where it completely breaks things. Just because you are not affected doesn't mean it's not a problem. – nikow Mar 18 '09 at 18:58
1

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?

e100
  • 1,603
  • 2
  • 14
  • 21
0

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.

Vasil
  • 36,468
  • 26
  • 90
  • 114