为什么Firefox在调整图像大小方面如此糟糕？

左边是原始PNG，右边是使用<img width和height减少到原始大小一半的版本。请参阅[链接删除]。为什么Firefox在调整图像大小方面如此糟糕？

为什么在Firefox中调整大小的图像看起来很模糊。有没有什么我可以做的，而不需要改变图像文件。如果图像包含大量的数学或文本，模糊特别烦人。

enter image description here

2011-05-06 Frank Seifert

你提到的问题是关于缩放图像了。尽管如此，还是有一些有用的链接。但是，我还没有找到解决方案。 – 2011-05-06 23:23:46

@弗兰克这些问题都是关于扩展。缩放的*方向*是无关紧要的，除非你知道我没有的东西。将应用相同的算法，并且相同的修复（如果存在）会影响两种情况。 – 2011-05-06 23:25:00

@Su：那么，那里接受的答案不起作用，它会使结果更糟糕。在http://developer.mozilla.org/En/CSS/Image-rendering中对'-moz-crisp-edges'说：“使用此值可以避免使用尖锐边缘变得模糊的*放大*图像。” – 2011-05-06 23:44:42

在Bugzilla中有一个longstanding bug ticket与Firefox图像缩小相关。您可能希望密切关注票据以追踪其最终解决方案，或者如果您觉得可以，请自行提供补丁。

最好的解决方法是使用transform CSS属性的微小旋转应用于问题图像和力亚像素渲染，如Ryan Wheale's answer详述。

来源

2011-05-07 09:52:40 Nick

我滥用bugzilla再次唠叨他们再次在那张可笑的票上 – 2012-08-17 05:24:28

查看我的回答下面的简单解决方案使用css3旋转 – 2013-01-13 21:15:44

Firefox的错误是固定的 – To1ne 2013-05-31 12:47:20

的image-rendering documentation从Firefox blurs an image when scaled through css or inline style答案，苏”引用包括使用image-rendering:optimizeQuality指令（该指令纠正了我的FF4测试问题）链接 - 例如：

enter image description here

来源

2011-05-07 01:46:13 danlefree

你说得对'image-rendering：optimizeQuality'（双线性重采样）是默认值。原始文章中的Firefox图像也使用了这种重采样技术。放大缩小图像质量（但也会使图像变大）。当我缩放一次或两次时，我会获得'optimizeQuality' 50％的图像。 – 2011-05-07 09:31:28

'图像渲染：optimizeQuality'是真正解决我问题的唯一解决方案 - 缩小尺寸的跳跃/抖动/抖动图像 – Prozi 2014-07-14 15:55:50

我想您的答案位于https://developer.mozilla.org/En/CSS/Image-rendering以上的链接中： '默认情况下，当前auto和optimizeQuality默认是相等的，都会导致双线性重采样。 “默认值IE8 +：双三次（高品质）”

下一页看到： http://www.codinghorror.com/blog/2007/07/better-image-resizing.html “当进行图像变小，可使用双三次，其具有天然的锐化效果。您想要在丢弃原始图像中的所有额外细节后，强调保留在新的较小图像中的数据。'

我能想到的几个可能的解决方法的，但也不是简单的：

调整服务器上的图像。既可以提供一半尺寸的文件，也可以允许Firefox将其扩展为完整版（推测这可能会适用），或者针对不同尺寸的图像使用不同的URL。
您可以使用插件在浏览器中完成此项工作（但我发现的示例并未实际执行您所需的操作，因此我已将其删除）。

来源

2011-05-07 09:11:28 GlennS

有趣的信息。太糟糕了，它显示FF只实现*双线性重新采样*和*最近的邻居* :( – 2011-05-07 09:39:53

我知道这是晚了，但你可以欺骗到Firefox的渲染图像通过施加哦，所以，轻微转动更好。我试图translate()的图像获得相同的效果......无济于事。

CSS

.image-scale-hack { 
    transform: rotate(.0001deg); 
}

的Javascript

if("MozAppearance" in document.documentElement.style) { 
    $('.logo img').addClass('image-scale-hack'); 
}

我避免浏览器嗅探不惜一切代价。我借用这个yepnope.js嗅，我不感到很难过。

同样值得注意的，该相同技巧可以用来强制子像素图像渲染在两者的webkit和Firefox。这是一个非常缓慢的动画很有用 - 例如由最好的解释：

http://jsfiddle.net/ryanwheale/xkxwN/

来源

2013-01-13 21:14:27

最佳答案imho – courtsimas 2013-08-15 15:34:41

您可以使用“rotate（0deg）”，它仍然可以解决问题。 – shipshape 2013-11-06 18:57:54

当我写这篇文章时，我尝试了'0deg'，浏览器看起来足够聪明知道不要做任何事情......这就是为什么我最终不得不“强制”浏览器来计算和渲染旋转的元素意思是'.0001deg'对人眼来说是不明显的......为什么不坚持这一点，并保持安全。 – 2013-11-06 19:11:47

TL; DR：图像缩放不可能尽快解决。在任何地方。

加长版：

厄里斯布拉塞尔有一个网页，与更广泛的问题很好优惠“为什么几乎所有的图像缩放软件如此糟糕？”

http://www.4p8.com/eric.brasseur/gamma.html

由于W3C在这一问题上的立场是粗略，它最好有一个不正确的，但同样不正确的实现无处不在，他们不计任何适当的交易与伽玛（这将略微事情复杂化）。因此，任何习惯于网络标准的人都可能会继续忽视伽玛，导致埃里克和本主题中描述的效应。这可以确保即使是缩小比例也不是很明确，正如Jeff Atwood在一篇文章中提到的另一个答案中所述。

在这样的环境中，像Lanczos这样的方法蓬勃发展，声称自己的名声大多是即使执行得不正确，他们的表现也相当好。

换句话说，浏览器就是麦当劳汉堡的软件，这个事实将会持续下去。其影响不需要，但可能性有所偏差。

来源

2015-10-16 16:52:07

解决此问题的方法就是使用图像编辑器将原始图像调整为所需的大小，并按原样使用图像，而无需在样式表中定义宽度和高度。

来源

2016-11-16 19:17:47

现在（2017年）该错误在2年前关闭。一个简短的测试：

FF，50％：