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

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

ChromeおよびFirefoxでは、ナシとして表示されます。ここで、保存して、デスクトップに保存されているものを確認してください。また、SafariまたはInternet Explorerで表示してみてください。リンゴとして表示されます！

画像をクリックして移動してみてください。リンゴが表示されます。

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

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

これが未修正の画像です。リンゴの絵の「白っぽい」ピクセルには、はるかに高い強度で保存された、つまり非常に明るい梨の絵が含まれています。

これがガンマ補正された画像です。ナシ画像の「黒っぽい」ピクセルにはリンゴの画像が含まれており、かなり通常の強度で保存されていますが、ガンマ補正により黒に近い値に縮小されています。

私の画面では、最初の画像の白いピクセルの間で梨がかすかに見えますが、2番目の画像では、リンゴは周囲の黒いピクセルと見分けがつきません。

（ガンマ補正されていないナシにも色の縞模様が見られる場合があります。これは、補正されていない画像がはるかに狭い範囲の色チャネルを使用しているためです。

PNGイメージファイルには、0.02のファイルガンマ値を指定するgAMAチャンクが含まれています。ガンマ補正なしで表示すると、視聴者には「白い」ピクセルが点在するリンゴが見えます。これは実際には元の（高）強度の梨です。

ガンマ補正を使用して表示すると、視聴者には、実際にははるかに低いガンマ値でレンダリングされたリンゴである「黒」ピクセルを持つ色補正された梨が表示されます。

梨を表示するブラウザは画像に対してガンマ補正を実行しますが、リンゴを表示するブラウザはガンマ補正を実行せず、文字通りの色値で表示するだけです。

これはコメントとしては少なすぎましたが、うまくいけば助けになります。

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

PNGガンマの悲しい物語「訂正」という記事は、問題、救済策、およびその他の面白い事実の非常に素晴らしい要約を提供します。

そうは言っても、実際に画像からガンマ情報を取り除くには pngcrush

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

そのため、ガンマ情報がある場合とない場合：

私はこれが「答え」だとは本当に言いませんが、おそらく正しい方向にあると思います。カラープロファイルなどに関する多くの知識をお持ちの方は、より正式な対応が必要です。

画像のガンマ（γ）を変更するには、次の値のガンマを変更します。

（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を、
ので、R」≈R0 ^γ +γ R1 * R0の^γ-1

これが0に近いガンマため、R0のことを意味^γを支配します。γ= 1の場合、R '≈R0 + R1が得られます

大きなガンマの場合、2番目の項が支配的であるため、R0 =梨の赤成分とR1 =リンゴの赤成分を直接設定できます。R0はR1よりもはるかに大きく、モニター（または各ソフトウェアが使用する特定のガンマ曲線）。

ピクセルを丸めることはなく、ICCカラープロファイルは問題ではありません。

これはトリック画像であり、一部のブラウザーはガンマデータなしでPNGを表示します。これらのブラウザーの場合、1つのものが表示され、他のブラウザーの場合は完全な画像が表示されます（背景にナシが隠れています）。

ブラウザがこのガンマデータをサポートしているかどうかに応じて、リンゴ/ナシのトリック画像が表示されるか、ナシが表示されるだけです。

偶然にも、適切に調整されたディスプレイで写真の詳細を見ることができ、ガンマ/輝度/コントラストが高い場合、写真の1つの画像がより隠されていることがわかります