Image 使Firefox图像缩小到与Chrome或IE中的结果相似

左边是原始PNG，右边是使用

宽度和
高度缩小到原始大小一半左右的版本

为什么在Firefox中调整大小的图像看起来如此模糊？在不更改图像文件的情况下，我能做些什么吗？如果图像包含大量数学或文本，模糊性尤其令人讨厌

Su'引用的答案中的链接包括使用
图像渲染：optimizeQuality
（在我对FF4的测试中纠正了这个问题）-示例：

我想你的答案在上面的链接中：
“当前自动和optimizeQuality默认相等，都会导致双线性重采样。”
'默认值IE8+：双三次（高质量）'

下一步见：
“缩小图像时，使用双三次曲线，它具有自然的锐化效果。您希望在丢弃原始图像中的所有额外细节后，强调保留在新的较小图像中的数据。”

我可以想出几个可能的解决办法，但都不简单：

调整服务器上图像的大小。要么以一半的大小提供，并允许Firefox将其放大到完整大小（估计可以），要么为不同大小的图像提供不同的URL
您可以通过插件在浏览器中实现这一点（但我发现的示例实际上并不能满足您的需要，因此我将其删除）
Bugzilla中有一个与Firefox图像缩小相关的文件。您可能希望密切关注票证，以跟踪其最终解决方案，或者如果您觉得有能力，您可以自己提供一个补丁

最好的解决方法是使用
transform
CSS属性对问题图像应用一个微小的旋转，并强制进行亚像素渲染，如中所述。
我知道这已经晚了，但是你可以通过应用一个如此微小的旋转来欺骗firefox使图像渲染得更好。我尝试了
translate（）
图像以获得相同的效果。。。无济于事

CSS

Javascript

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

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

同样值得注意的是，同样的技巧也可以用于在webkit和firefox中强制进行亚像素图像渲染。这对于非常慢的动画非常有用-最好通过示例进行解释：

TL；DR：图像缩放不太可能很快修复。到处都有

较长版本：

Eris Brasseur有一个页面很好地处理了一个更广泛的问题：“为什么任何图像缩放软件都这么糟糕？”


由于W3C在这一问题上的立场大致是，最好在任何地方都有一个不正确但同样不正确的实现，因此他们避免对Gamma进行任何适当的处理（这会使事情稍微复杂化）。因此，任何习惯web标准的人都可能继续忽略Gamma，从而导致Eric和本文中描述的效果。正如杰夫·阿特伍德（Jeff Atwood）在一篇与另一个答案相关联的文章中所说，这确保了即使是缩小规模也远未得到明确定义

在这样的环境中，像Lanczos这样的方法蓬勃发展，其声名远扬的主要原因是即使实现不正确，它们的性能也相当好

换句话说，浏览器就是麦当劳汉堡的软件，这一事实将继续存在。它的含义不需要，但可能性是有偏差的。
这个问题的一个解决方法就是使用图像编辑器将原始图像调整到所需的大小，并按原样使用图像，而不在样式表中定义其宽度和高度
 现在（2017年）该漏洞已于2年前关闭。一个简短的测试：

FF，50%：


FF，25%：

您提到的问题是关于放大图像的。尽管如此，这里还是有一些有用的链接。然而，我还没有找到解决方案。@Frank这两个问题都是关于缩放的。缩放的方向是无关的，除非你知道一些我不知道的东西。同样的算法会被应用，同样的修复（如果存在的话）会影响这两种情况。@Su：好吧，这里被接受的答案不起作用，它会使结果更糟。上面写着关于
-moz crisp edges
：“使用此值可避免锐利边缘的放大图像变得模糊。”这不是答案，但请注意，让浏览器调整图像大小通常不是一个好主意。有人应该为chrome编写firefox插件兼容层，那么firefox可能会在和平时期消亡，你可以正确地说，
图像渲染：optimizeQuality
（双线性重采样）是默认值。原始帖子中的Firefox图像也使用了这种重采样技术。放大可以提高图像质量（但也会使图像变大）。当我放大一两次时，我得到了你的
optimizeQuality
50%的图像。
图像渲染：optimizeQuality
是解决我问题的唯一有效方法-跳跃/抖动/抖动图像是缩小比例的有趣信息。太糟糕了，FF似乎只实现双线性重采样和最近邻：（我辱骂了bugzilla，在那张可笑的罚单上再次唠叨他们。请看下面我的答案，了解使用css3旋转的简单解决方案。不，它不是固定的。它被标记为固定的，但它不是固定的。哇，伙计们，刚刚救了我的命！即使在放大的过程中，他也非常糟糕，在某些情况下，他不再显示完整的图像了。-你可以使用“旋转”（0deg）“它仍然解决了这个问题。在我写这篇文章的时候，我尝试了
0deg
，而浏览器似乎足够聪明，知道什么都不做……这就是为什么我最终不得不“强制”用于计算和渲染旋转元素的浏览器。我的意思是，
.0001deg
对人眼来说是不可见的…为什么不坚持这样做并确保安全。对我来说，Firefox的修复方法是应用位置：相对于图像的开和关，
if( "MozAppearance" in document.documentElement.style ) {
    $('.logo img').addClass('image-scale-hack');
}