当通过外部CSS或内联样式扩展时，Firefox会模糊一个图像。

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.

当我在视觉上缩放一个图像时，Firefox 3模糊了它。Firefox 2和其他浏览器没有，这是我所期望的。对于使用png或gif创建基于web的游戏来说，这尤其糟糕。

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

例如，当在firefox3中显示100x100图像时:

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

或

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

it looks blurred in FF3, not in IE.

它在FF3中看起来很模糊，而不是在IE中。

Any ideas on how to prevent this?

有什么预防的办法吗?

9 个解决方案

#1

I discovered this new feature of FireFox:

我发现了FireFox的新特性:

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

So putting this in your CSS will fix it:

所以把这个放到CSS中就可以解决这个问题:

image-rendering: -moz-crisp-edges;

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

我想分享这个信息。很抱歉回答了我自己的问题。

#2

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

我自己也在想这个问题，但它似乎是在ff3中硬编码的:(http://forums.mozillazine.org/viewtopic.php?

ff2 didn't do any interpolation

ff2没有做任何插值

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

IE默认没有，但是你可以打开它:http://www.joelonsoftware.com/items/2008/12/22.html

#3

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.

您正在将图像从原来的大小向上缩放——期望的效果通常是具有平滑的缩放，而FFX3似乎已经开始这样做了(我假设是双线性滤波)。我认为如果你看一下Safari和Opera你会发现它们也会过滤图像。

#4

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.

http://developer.mozilla.org/En/CSS/Image-rendering仅适用于Firefox当前的主干版本(Minefield/3.6a1pre/Gecko 1.9.2)。这个功能不在Firefox 3.0中，也不会出现在即将发布的3.5版本中。带有该选项的第一个发行版将是下一个主要发行版，在3.5之后，目前还处于早期规划阶段，预计将在2010年发布。

#5

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.

Internet Explorer 8在缩放图像时也会“模糊”图像。这其实是件好事。当使用双三次抽样而不是最近邻居抽样时，大多数图像看起来更好。

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

如果你想让ie8像以前的版本一样缩放图像，请把它放在你的CSS里:

-ms-interpolation-mode: nearest-neighbor;

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

如果你想要IE 7像IE 8一样缩放图片，请使用以下工具:

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

除了图像的外观，您还必须考虑性能。我发现IE 7和IE 8在使用双三次采样时需要比Firefox 3.6更多的CPU能力来缩放图像。

#6

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.

实际上，我更喜欢FF的方式，因为它在缩放图像时使用插值，在大多数情况下，这会让图像看起来比IE中的要好得多。但是我猜有一些情况是不好的，比如使用精灵的时候。

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

我不认为有什么方法可以绕过它。

#7

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.

不幸的是，我没有解决这个问题的解决方案，但是对于很多用户(例如像素艺术家)来说，这是一个彻底的障碍。如果您受此影响，请向http://hendrix.mozilla.org/发送反馈，并为相应的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.

令人失望的是，Mozilla忽视了这个问题。对于许多受影响的用户来说，这意味着除了切换浏览器，没有别的选择。IE有CSS属性来选择调整过滤器的大小，所以这似乎是最好的选择。

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.

这是谷歌Chrome的bug报告，它和Firefox有同样的问题。我不知道歌剧，但我听说他们用一些启发式来进行更健康的自动缩放。

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

我想知道，如果你创建的精灵的大小是你希望看到的最大，然后按要求缩小，你会得到更好的结果吗?

#9

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.

您应该避免扩展客户端的映像。向上缩放图像就像缩放一样，浏览器没有显示图像的信息来显示比实际更高的分辨率，所以你不能这样做而不影响图像，也许在IE中没有注意到，试着把200px改成400px。

#1