爲什麼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％：