題 為什麼這個PNG圖像在Chrome和Firefox中的顯示方式與在Safari和IE中的顯示方式不同?


檢查此圖片:

Apple or Pear

在Chrome和Firefox上,它將顯示為梨。現在,嘗試保存並查看保存在桌面上的內容。此外,嘗試查看 蘋果瀏覽器 要么 IE瀏覽器。它會顯示為蘋果!

嘗試單擊圖像並移動它。你會注意到蘋果出現了。

為什麼會這樣?


667
2018-04-07 03:32


起源


如果我嘗試在firefox上稍微拖動圖像,透明拖動的圖像將使蘋果的形狀變為aPear - ajax333221
你是怎麼創造這張照片的?你能指點我一個網站嗎? - tumchaaditya
對於未來的讀者,這似乎在當前版本的IE中得到修復。 - Kat
但你仍然可以將它下載到你的桌面並在那裡看到蘋果,並在Firefox,Chrome瀏覽器中查看它。 - Jet


答案:


這是因為某些瀏覽器執行圖像文件中指定的伽馬校正。

這是未經修正的圖像。蘋果圖片中的“白色”像素包含梨的圖片,以更高的強度存儲,即非常明亮。

這是伽馬校正的圖像。梨圖中的“黑色”像素包含蘋果的圖像,以相當正常的強度存儲,但通過伽馬校正縮小到接近黑色。

在我的屏幕上,我可以在第一張圖像中的白色像素中隱約看到梨,但在第二張圖像中,蘋果與周圍的黑色像素無法區分。

(您可能還會在伽馬校正的梨上看到一些色帶,因為未校正的圖像使用的色域範圍要小得多。)

PNG圖像文件包含指定文件伽瑪值為0.02的gAMA塊。當沒有伽馬校正顯示時,觀察者看到一個散佈著“白色”像素的蘋果,實際上是原始(高)強度的梨。

當用伽馬校正顯示時,觀察者看到具有“黑色”像素的經過顏色校正的梨,其實際上是以低得多的伽馬值渲染的蘋果。

顯示梨的瀏覽器正在對圖像執行伽馬校正,而顯示蘋果的瀏覽器不執行伽馬校正,而只是用其字面顏色值顯示它。


529
2018-04-07 05:23



關於這個主題的推薦閱讀:Eric Brasseur的著名文章稱 “圖片縮放中的Gamma錯誤。 - ulidtko
@ulidtko現在是404.這是一個 複製在Web Archive上。 - Cole Johnson


這對於評論來說有點過分,但希望它有所幫助。

所以,我相當肯定這個問題涉及瀏覽器用PNG解釋伽瑪信息的方式。這是一個非常有趣的問題,並且首先處理伽馬信息的模糊性。

這篇文章 巴布亞新幾代Gamma“糾正”的悲慘故事 提供了關於問題,補救措施和其他有趣事實的非常好的總結。

話雖如此,我們實際上可以使用圖像從圖像中去除伽瑪信息 pngcrush

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB pear.png apple.png

所以使用伽瑪信息,沒有它:

pear an apple

我不會說這是“答案”,但如果有的話,它可能是正確的方向。我相信對顏色配置文件等有很多了解的人會得到更正式的回复。


228
2018-04-07 04:34



這兩個圖像看起來和我一樣,在蘋果和梨之間閃爍,就像問題中的原始圖像一樣。我正在使用Safari 6.0.2 - Fraser Graham
請注意,此處提供的命令的最後兩個元素是 infile 和 outfile:例如 pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png。更多信息: hsivonen.fi/png-gamma - fredrivett


改變伽瑪(γ)圖像包括在以下位置修改值gamma:

(R',G',B')=(Rγ, Gγ,Bγ

在將伽瑪函數應用於初始像素值(R,G,B)之後,給出輸出像素顏色(R',G',B')在屏幕上顯示(考慮R,G和B歸一化在0和1之間) )。

現在,讓我們以紅色通道為例。
如果 R = R0 + R1 ,你會得到的
R'=(R0 + R1)γ = R0γ *(1 + R1 / R0)γ

如果R0比R1大得多,那麼你就有了
(1 + R1 / R0)γ ≈1+γR1 / R0
所以 R'≈R0γ +γ


40
2018-04-07 05:38





它沒有捨入像素,ICC顏色配置文件不是問題。

這是一個技巧圖像,一些瀏覽器顯示沒有伽瑪數據的PNG。對於那些瀏覽器,您會看到一件事,而對於其他瀏覽器,您會看到完整的圖像(背景中隱藏著梨)。

我看到蘋果/梨子技巧圖像,或者我只看到梨子,這取決於瀏覽器是否支持此伽瑪數據。


9
2018-04-07 05:41





當它發生時,你可以通過適當的校準顯示在圖片中看到更多細節 如果伽瑪/亮度/對比度高,你可以看到圖片中的一個圖像  更多


1
2018-03-11 01:49