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

Question

左侧是原始PNG，右侧是使用<img width和height减少到原始大小一半的版本。请参阅[已删除链接]。

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

Answer 1

我知道这已经很晚了，但你可以通过应用一个非常轻微的旋转来欺骗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/

Answer 2

Bugzilla中有一个longstanding bug ticket与Firefox图像缩减有关。您可能希望密切注意跟踪其最终解决方案的故障单，或者如果您愿意，可以自己提供补丁。

最佳解决方法是使用transform CSS属性对问题图像应用微小旋转并强制子像素渲染，详见Ryan Wheale's answer。

Answer 3

来自image-rendering documentation答案的Firefox blurs an image when scaled through css or inline style来自Su'引用的说明包含使用image-rendering:optimizeQuality的说明（在我对FF4的测试中更正了问题） - 示例：

Answer 4

我认为您的回答位于https://developer.mozilla.org/En/CSS/Image-rendering上方的链接中： “目前auto和optimizeQuality默认是相同的，都会导致双线性重采样。” '默认值IE8 +：bicubic（高质量）'

接下来看： http://www.codinghorror.com/blog/2007/07/better-image-resizing.html '当缩小图像时，请使用具有自然锐化效果的双三次。您希望在丢弃原始图像中的所有额外细节后强调新的较小图像中保留的数据。'

我可以想到几种可能的解决方法，但两者都不简单：

1. 调整服务器上的图像大小。要么以半个大小提供它，并允许Firefox将其扩展到完整（可能是可以的），或者为不同大小的图像设置不同的URL。
2. 您可以使用插件在浏览器中完成此工作（但我找到的示例实际上并不是您需要的，所以我已将其删除了。）

Answer 5

TL; DR：图像缩放不太可能很快修复。关于任何地方。

更长的版本：

Eris Brasseur有一个页面可以很好地处理更广泛的问题＆＃34;为什么任何图像缩放软件都是如此糟糕？＆＃34;

http://www.ericbrasseur.org/gamma.html

由于W3C在这个问题上的立场大致是在各地都有一个不正确但同样​​不正确的实施，他们避免任何正确处理Gamma（这会使事情略微复杂化）。因此，任何习惯于Web标准的人都可能会继续忽略Gamma，从而导致Eric所描述的效果并在此线程中。这确保了即使缩小尺寸也远非明确定义，正如杰夫阿特伍德将其置于另一个答案中链接的文章中。

在这样的环境中，像Lanczos这样的方法茁壮成长，其声名远大于即使实施不正确也能表现良好。

换句话说，浏览器是相当于麦当劳汉堡的软件，而这个事实将会存在。它的含义不需要，但可能性有所不同。

Answer 6

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

FF，50％：

FF，25％：

Answer 7

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