it-swarm.com.de

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

Überprüfen Sie dieses Bild aus:

Apple or Pear

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 Apple angezeigt!

Versuchen Sie, auf das Bild zu klicken und es zu verschieben. Sie werden feststellen, dass Apple angezeigt wird.

Warum passiert das?

672
ethree

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

Hier ist das unkorrigierte Bild. Die "weißlichen" Pixel in dem Apfelbild enthalten das Bild einer Birne, die mit einer viel höheren Intensität gespeichert ist, d. H. Sehr hell.

 

Hier ist das gammakorrigierte Bild. Die "schwarzen" Pixel in dem 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 Anzeige ohne Gammakorrektur sieht der Betrachter einen Apfel mit "weißen" Pixeln durchsetzt, die eigentlich 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 tatsächlich dem von Apple mit einem viel niedrigeren Gammawert wiedergegebenen Wert entsprechen.

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

532
mwfearnley

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.

Trotzdem können wir die Gammainformationen mithilfe von pngcrush aus einem Bild entfernen.

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

Also mit der Gamma-Information und ohne:

pearan Apple

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 usw. eine formellere Antwort erhalten wird.

229

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

(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, haben Sie
(1 + R1/R0)γ ≈ 1 + γ R1/R0 ,
so R '≈ R0γ + γ
R1 * R0γ-1

Dies bedeutet, dass für Gamma nahe 0 R0 istγ dominiert. Für γ = 1 erhält man
R '≈ R0 + R1

Bei einem großen Gamma dominiert der zweite Term, so dass Sie R0 = rote Komponente der Birne und R1 = rote Komponente des Apfels direkt 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 spezielle Gammakurve, die jede Software verwendet).

40
WhitAngl

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 Apple/Pear-Trick-Bild oder nur die Birne, je nachdem, ob der Browser diese Gammadaten unterstützt.

9
Jodo

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 versteckt mehr ist

1
nwgat