Warum wird dieses PNG-Bild in Chrome & Firefox anders angezeigt als in Safari und IE?

Überprüfen Sie dieses Bild aus:

In Chrome und Firefox wird es als Birne angezeigt. Versuchen Sie nun, es zu speichern und sehen Sie es sich auf Ihrem Desktop an. Versuchen Sie auch, in Safari oder Internet Explorer anzuzeigen . Es wird als Apfel angezeigt!

Versuchen Sie, auf das Bild zu klicken und es zu verschieben. Sie werden bemerken, dass der Apfel erscheint.

Warum passiert das?

Dies liegt daran, dass einige Browser die in der Bilddatei angegebene Gammakorrektur durchführen.

Hier ist das unkorrigierte Bild. Die "weißlichen" Pixel im Apfelbild enthalten das Bild einer Birne, die mit einer viel höheren Intensität gespeichert ist, dh sehr hell.

Hier ist das gammakorrigierte Bild. Die "schwarzfarbenen" Pixel im Birnenbild enthalten das Bild eines Apfels, das mit einer ziemlich normalen Intensität gespeichert, aber mit der Gammakorrektur auf nahezu Schwarz verkleinert wurde.

Auf meinem Bildschirm sehe ich die Birne schwach zwischen den weißen Pixeln im ersten Bild, aber im zweiten Bild ist der Apfel von den schwarzen Pixeln um ihn herum nicht zu unterscheiden.

(Möglicherweise sehen Sie auch Farbstreifen auf der gammakorrigierten Birne, da das unkorrigierte Bild einen viel kleineren Bereich der Farbkanäle verwendet.)

Die PNG-Bilddatei enthält einen gAMA-Block, der einen Datei-Gammawert von 0,02 angibt. Bei der Anzeige ohne Gammakorrektur sieht der Betrachter einen Apfel mit "weißen" Pixeln, bei denen es sich tatsächlich um die Birne mit ihrer ursprünglichen (hohen) Intensität handelt.

Bei der Anzeige mit Gammakorrektur sieht der Betrachter eine farbkorrigierte Birne mit "schwarzen" Pixeln, die eigentlich der Apfel sind, der mit einem viel niedrigeren Gammawert gerendert wurde.

Browser, in denen die Birne angezeigt wird, führen eine Gammakorrektur für das Bild durch, während Browser, in denen der Apfel angezeigt wird, keine Gammakorrektur durchführen, sondern nur die tatsächlichen Farbwerte anzeigen.

Dies war ein bisschen zu viel für einen Kommentar, aber hoffentlich hilft es.

Daher bin ich mir ziemlich sicher, dass sich dieses Problem mit der Art und Weise befasst, wie die Browser Gammainformationen mit PNGs interpretieren. Es ist ein ziemlich lustiges Problem und befasst sich in erster Linie mit den Mehrdeutigkeiten von Gammainformationen.

Der Artikel Die traurige Geschichte von PNG Gamma “Correction” bietet eine sehr schöne Zusammenfassung der Probleme, Abhilfemaßnahmen und anderer lustiger Fakten.

Wenn dies gesagt ist, können wir die Gammainformation von einem Bild unter Verwendung von entfernen pngcrush

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

Also mit der Gamma-Information und ohne:

Ich würde nicht wirklich sagen, dass dies "die Antwort" ist, aber wenn überhaupt, ist es wahrscheinlich in die richtige Richtung. Ich bin sicher, dass jemand mit viel Wissen über Farbprofile und so weiter eine formellere Antwort erhalten wird.

Das Ändern des Gammas ( γ ) eines Bildes besteht darin, den Wert gamma zu ändern in:

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

Dies gibt die Ausgabepixelfarbe (R ', G', B ') an, die auf dem Bildschirm angezeigt wird, nachdem die Gammafunktion auf die anfänglichen Pixelwerte (R, G, B) angewendet wurde (unter Berücksichtigung von R, G und B, die zwischen 0 und 1 normalisiert sind) ).

Nehmen wir zum Beispiel den roten Kanal.
Wenn R = R0 + R1 , erhalten Sie
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Wenn R0 viel größer als R1 ist, dann haben Sie
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
also R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Dies bedeutet, dass für Gamma nahe 0 R0 ^γ dominiert. Für γ = 1 erhalten Sie
R '≈ R0 + R1

Bei einem großen Gamma dominiert der zweite Term, so dass Sie direkt R0 = rote Komponente der Birne und R1 = rote Komponente des Apfels einstellen können, wobei R0 viel größer als R1 ist und Sie die gewünschten Variationen erhalten, wenn Sie das Gamma von ändern Ihren Monitor (oder die jeweilige Gammakurve, die jede Software verwendet).

Es werden keine Pixel gerundet und die ICC-Farbprofile sind nicht das Problem.

Es ist ein Trickbild und einige Browser zeigen PNGs ohne Gammadaten an. Bei diesen Browsern sehen Sie eine Sache, und bei anderen Browsern sehen Sie das vollständige Bild (mit der Birne im Hintergrund).

Ich sehe entweder ein Apfel- / Birnen-Trickbild oder nur die Birne, je nachdem, ob der Browser diese Gammadaten unterstützt.

gut wie es passiert, können Sie mehr Details in Bildern mit einer korrekt kalibrierten Anzeige sehen, und wenn Gamma / Helligkeit / Kontrast viel zu hoch sind, können Sie sehen, dass das eine Bild im Bild mehr ausgeblendet ist