使 Firefox 图像缩小类似于 Chrome 或 IE 中的结果

Posted 2023-02-21

【中文标题】使 Firefox 图像缩小类似于 Chrome 或 IE 中的结果

【英文标题】：Make Firefox image scaling down similar to the results in Chrome or IE

【发布时间】：2011-08-20 14:07:22

【问题描述】：

左侧是原始 PNG，右侧是使用 width 和 height 缩小到原始大小大约一半的版本。

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

【问题讨论】：

您提到的问题是关于放大图像。尽管如此，还是有一些有用的链接。但是，我还没有找到解决方案。

@Frank 这些问题都与缩放有关。缩放的方向 是无关紧要的，除非你知道我不知道的东西。将应用相同的算法，并且相同的修复（如果存在）会影响这两种情况。

@Su：好吧，那里接受的答案不起作用，它使结果更糟。在developer.mozilla.org/En/CSS/Image-rendering 上，它对-moz-crisp-edges 表示：“使用此值可避免放大 边缘锐利的图像变得模糊。”

不是答案，但请注意，让浏览器调整图像大小通常不是一个好主意。

有人应该为chrome写一个firefox插件兼容层，然后firefox就可以安然死了

【参考方案1】：

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

【讨论】：

你说的对，image-rendering:optimizeQuality（双线性重采样）是默认值。原始帖子中的 Firefox 图像也使用了这种重采样技术。放大可提高图像质量（但也会使图像变大）。从我的放大一次或两次时，我得到你的optimizeQuality 50% 图像。

image-rendering:optimizeQuality 是唯一真正解决我的问题的解决方案 - 缩小的跳跃/抖动/颤抖图像

【参考方案2】：

我认为您的答案在上面https://developer.mozilla.org/En/CSS/Image-rendering 的链接中： '目前 auto 和 optimizeQuality 默认是相等的，都导致双线性重采样。 '默认值 IE8+: 双三次（高质量）'

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

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

调整服务器上的图像大小。要么将其提供一半大小，并允许 Firefox 将其放大到全尺寸（这大概可以），要么为不同大小的图像设置不同的 URL。 您可以使用插件在浏览器中实现此功能（但我发现的示例实际上并不能满足您的需求，因此我已将其删除）。

【讨论】：

有趣的信息。太糟糕了，FF似乎只实现了双线性重采样和最近邻 :(

【参考方案3】：

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

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

【讨论】：

我滥用了 bugzilla，在这张荒谬的票上再次唠叨他们。

请参阅下面的答案，了解使用 css3 旋转的简单解决方案。

不，它不是固定的。它被标记为固定，但它不是固定的。

哇，刚刚救了我的家伙！即使在升级时他也很糟糕，以至于在某些情况下他不会再显示完整的图像了-.-

【参考方案4】：

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

【讨论】：

你可以只使用“rotate(0deg)”，它仍然可以解决问题。

在我写这篇文章的时候我试过0deg 并且浏览器似乎足够聪明，知道什么都不做......这就是为什么我最终不得不“强制”浏览器计算和渲染一个旋转的元素。我的意思是，.0001deg 对人眼来说是不明显的......为什么不坚持下去并确保安全。

对我来说，Firefox 的修复是应用位置：相对于图像打开和关闭，必须在页面加载时这样做。

【参考方案5】：

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

加长版：

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

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

由于 W3C 在这个问题上的立场大致是最好在任何地方都有一个不正确但同样​​不正确的实现，他们回避任何适当的 Gamma 处理（这会使事情稍微复杂化）。因此，任何习惯于 Web 标准的人都可能会继续忽略 Gamma，从而导致 Eric 和此线程中描述的效果。这确保了即使缩小规模也远未得到明确定义，正如 Jeff Atwood 在另一个答案中链接的文章中所说的那样。

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

换句话说，浏览器是相当于麦当劳汉堡的软件，这一事实将继续存在。它的影响不需要，但可能性是有偏差的。

【参考方案6】：

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

【参考方案7】：

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

FF，50%：

FF，25%：