为什么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中存在一个与Firefox图像缩小相关的长期错误提示.您可能希望密切注意跟踪其最终解决方案的故障单,或者如果您愿意,可以自己提供补丁.

最好的解决方法是使用transformCSS属性对问题图像应用微小旋转并强制子像素渲染,详见Ryan Wheale的答案.

Answer 3

从Firefox链接的图像渲染文档在通过css或内联样式答案进行缩放时模糊图像,Su'引用包含使用说明image-rendering:optimizeQuality(在我的FF4测试中纠正了问题) - 示例: