web-dev-qa-db-ja.com

ChromeとFirefoxでは、このPNG画像の表示がSafariやIEと異なるのはなぜですか。

この画像をチェックしてください。

Apple or Pear

ChromeとFirefoxではそれは洋ナシとして表示されます。それでは、それを保存してデスクトップに保存してみましょう。また、 Safari または Internet Explorer で表示してみてください。アップルとして表示されます。

画像をクリックして動かしてみてください。あなたはAppleが現れるのに気づくでしょう。

なぜこれが起こるのですか?

674
ethree

これは、一部のブラウザではイメージファイルで指定されているとおりにガンマ補正を実行するために発生します。

これが修正されていない画像です。アップル画像の「白っぽい」ピクセルは、はるかに高い強度で、すなわち非常に明るい状態で保存されたナシの画像を含む。

これがガンマ補正された画像です。洋ナシ画像の「黒っぽい」ピクセルには、かなり普通の強度で保存されているが、ガンマ補正で黒に近くまで縮小されたアップルの画像が含まれています。

私の画面では、最初の画像の白いピクセルの中に梨がかすかに見えていますが、2番目の画像では、Appleはその周囲の黒いピクセルと区別がつきません。

(補正されていない画像では非常に狭い範囲のカラーチャンネルが使用されているため、ガンマ補正された洋ナシにもカラーバンディングが見られることがあります。)

PNG画像ファイルには、ファイルガンマ値0.02を指定するgAMAチャンクが含まれています。ガンマ補正なしで表示すると、「白」のピクセルが点在するAppleが見えます。これは、実際には元の(高い)強度ではナシです。

ガンマ補正で表示すると、視聴者には、実際にははるかに低いガンマ値でレンダリングされた「黒」のピクセルを含む色補正された洋ナシが見えます。

洋ナシを表示するブラウザは画像のガンマ補正を実行していますが、アップルを表示するブラウザはガンマ補正を実行していませんが、文字通りのカラー値で表示しています。

533
mwfearnley

これはコメントにはちょっと多すぎですが、うまくいけば助けになるでしょう。

だから、私はこの問題がブラウザがPNGでガンマ情報を解釈する方法を扱っているとかなり確信しています。これはかなり楽しい問題で、最初にガンマ情報のあいまいさを扱います。

記事 PNGガンマの悲しい物語「Correction」 には、問題、解決策、その他のおもしろい事実についての非常に素晴らしい要約があります。

そうは言っても、pngcrushを使って画像からガンマ情報を実際に取り除くことができます。

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

それで、ガンマ情報とそれなしで:

pearan Apple

これが「答え」であるとはあまり言いませんが、どちらかといえば正しい方向にあると思います。カラープロファイルなどに関する多くの知識を持った人が、より正式な回答を得られると確信しています。

229

画像のガンマ(γ)を変更することは、値γを変更することからなります。

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

これは、ガンマ関数を初期ピクセル値(R、G、B)に適用した後に画面に表示される出力ピクセル色(R '、G'、B ')を示します(0、1の間で正規化されたR、G、Bを考慮)。 ).

それでは、赤いチャンネルを例に取りましょう。
R = R0 + R1の場合、
R '=(R0 + R1)γ = R0γ *(1 + R1/R0)γ

R0がR1よりはるかに大きい場合は、
(1 + R1/R0)γ ≈1 +γR1/R0
soR '≈R0γ +γ
R1 * R0γ-1

これは、ガンマが0に近い場合、R0を意味します。γ 支配する。 γ= 1の場合、
R '≒R0 + R1

大きなガンマの場合は、2番目の項が支配的になります。つまり、R0 =ナシの赤成分、R1 =アップルの赤成分をR1よりはるかに大きく設定することができます。あなたのモニタ(または各ソフトウェアが使用する特定のガンマカーブ)。

40
WhitAngl

丸みを帯びたピクセルではなく、ICCカラープロファイルは問題になりません。

それはトリックなイメージです、そしていくつかのブラウザはガンマデータなしでPNGを表示します。これらのブラウザでは1つのことがわかり、他のブラウザでは(ナシが背景に隠れている)フルイメージが表示されます。

私は、ブラウザがこのガンマデータをサポートしているかどうかに応じて、Apple/pearのトリック画像を見るか、または単にpearを見るだけです。

9
Jodo

それが起こるように、あなたは適切な目盛り付きディスプレイで絵の中でより多くの詳細を見ることができます、そして、ガンマ/明るさ/コントラストが高すぎる方法であるならば、絵の1つの画像は隠されているのがわかりますもっと

1
nwgat