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

Dies ist darauf zurückzuführen, 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, dh sehr hell, gespeichert wird.

Hier ist das Gamma-korrigierte Bild. Die "black-ish" -Pixel im Birnenbild enthalten das Bild eines Apfels, das bei einer ziemlich normalen Intensität gespeichert ist, jedoch mit der Gammakorrektur auf nahezu Schwarz verkleinert wurde.

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

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

Die PNG-Bilddatei enthält einen gAMA-Block, der einen Dateigammawert von 0,02 angibt. Bei der Anzeige ohne Gamma-Korrektur sieht der Betrachter einen Apfel mit "weißen" Pixeln, die tatsächlich die Birne in ihrer ursprünglichen (hohen) Intensität sind.

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

Browser, die die Birne anzeigen, führen eine Gammakorrektur für das Bild durch, während Browser, die den Apfel anzeigen, keine Gammakorrektur durchführen, sondern nur mit den wörtlichen Farbwerten.

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

Ich bin mir ziemlich sicher, dass es in dieser Ausgabe darum geht, wie Browser Gamma-Informationen mit PNGs interpretieren. Es ist ein ziemlich lustiges Problem und befasst sich in erster Linie mit den Mehrdeutigkeiten von Gamma-Informationen.

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

Damit können wir tatsächlich die Gamma-Informationen aus einem Bild entfernen, indem Sie verwenden pngcrush

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

Also mit der Gamma-Information und ohne sie:

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

Changing the gamma (γ) of an image consists in modifying the value gamma in:

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

which gives the output pixel color (R',G',B') displayed on the screen after applying the gamma function to the initial pixel values (R,G,B) (considering R,G, and B normalized between 0 and 1).

Now, let's take the red channel for example.
If R = R0+R1, you will obtain
R' = (R0+R1)^γ = R0^γ * (1+R1/R0)^γ

If R0 is much bigger than R1, then you have
(1+R1/R0)^γ ≈ 1 + γR1/R0,
so R' ≈ R0^γ + γR1*R0^γ-1

This means that for gamma close to 0, R0^γ dominates. For γ=1, you get
R' ≈ R0 + R1

Fo a large gamma, the second term dominates, so that you can directly setup R0 = red component of the pear and R1 = red component of the apple, with R0 much larger than R1 and you will obtain the desired variations when changing the gamma of your monitor (or the particular gamma curve each software uses).

Die Pixel werden nicht gerundet, und die ICC-Farbprofile sind nicht das Problem.

Es ist ein Trickbild, und einige Browser zeigen PNGs ohne Gamma-Daten 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 ich sehe nur die Birne, abhängig davon, ob der Browser diese Gamma-Daten unterstützt.

So wie es aussieht, können Sie in Bildern mit einer richtig kalibrierten Anzeige mehr Details sehen. Wenn Gamma / Helligkeit / Kontrast zu hoch ist, können Sie sehen, dass ein Bild im Bild mehr verborgen ist