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


Sieh dir dieses Bild an:

Apple or Pear

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

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

Warum passiert das?


663
2018-04-07 03:32


Ursprung


Wenn ich versuche, das Bild nur ein wenig auf Firefox zu ziehen, macht das transparent gezogene Bild die Form des Apple aPear - ajax333221
Wie hast du dieses Bild erstellt? Kannst du mich auf eine Website hinweisen? - tumchaaditya
Für zukünftige Leser scheint dies in den aktuellen IE-Versionen behoben zu sein. - Kat
Aber Sie können es immer noch auf Ihren Desktop herunterladen und Apple dort sehen, und es in Firefox, Chrome als Birne anzeigen. - Jet


Antworten:


Es passiert, weil einige Browser die Gammakorrektur durchführen, wie in der Bilddatei angegeben.

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

Hier ist das gammakorrigierte Bild. Die "schwarzen" Pixel in dem Birnenbild enthalten das Bild eines Apfels, der mit einer ziemlich normalen Intensität gespeichert wird, aber mit der Gammakorrektur auf nahezu Schwarz herunterskaliert wird.

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

(Auf der Gammakorrigierten Birne können Sie möglicherweise auch Farbstreifen sehen, da das unkorrigierte Bild einen viel kleineren Bereich der Farbkanäle verwendet.)

Die PNG-Bilddatei enthält einen gAMA-Chunk, der einen Datei-Gammawert von 0,02 angibt. Wenn er ohne Gammakorrektur angezeigt wird, sieht der Betrachter einen Apfel mit "weißen" Pixeln eingestreut, die eigentlich die Birne in ihrer ursprünglichen (hohen) Intensität sind.

Wenn der Betrachter mit Gammakorrektur angezeigt wird, sieht er eine farbkorrigierte Birne mit "schwarzen" Pixeln, bei denen es sich tatsächlich um den Apfel handelt, der mit einem viel niedrigeren Gammawert wiedergegeben wird.

Browser, die die Birne anzeigen, führen eine Gammakorrektur auf dem Bild durch, während Browser, die den Apfel anzeigen, keine Gammakorrektur durchführen, sondern sie nur mit ihren literalen Farbwerten zeigen.


524
2018-04-07 05:23



Eine empfohlene Lektüre zum Thema: der berühmte Artikel von Eric Brasseur genannt "Gamma-Fehler bei der Bildskalierung. - ulidtko
@ulidtko Das ist jetzt ein 404. Hier ist ein Kopieren Sie auf das Web-Archiv. - Cole Johnson


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

Ich bin ziemlich sicher, dass dieses Thema die Art und Weise betrifft, wie die Browser Gamma-Informationen mit PNGs interpretieren. Es ist ein ziemlich spaßiges Problem und beschäftigt sich zunächst mit den Mehrdeutigkeiten der Gamma-Informationen.

Der Artikel Die traurige Geschichte von PNG Gamma "Korrektur" bietet eine sehr schöne Zusammenfassung der Probleme, Heilmittel und andere lustige Fakten.

Nachdem das gesagt ist, können wir die Gamma-Information tatsächlich 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 es:

pear an apple

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 und so weiter mit einer formelleren Antwort kommen wird.


227
2018-04-07 04:34



diese beiden Bilder sehen für mich gleich aus und flackern zwischen Apfel und Birne, genau wie das Original in der Frage. Ich benutze Safari 6.0.2 - Fraser Graham
Beachten Sie, dass die letzten beiden Elemente des hier angegebenen Befehls die sind infile und outfile: z.B. pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. Mehr Info: hsivonen.fi/png-gamma - fredrivett


Ändern des Gamma (γ) eines Bildes besteht darin, den Wert gamma in:

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

Dies gibt die ausgegebene Pixelfarbe (R ', G', B ') auf dem Bildschirm an, nachdem die Gammafunktion auf die Anfangspixelwerte (R, G, B) angewendet wurde (unter Berücksichtigung von R, G und B normalisiert zwischen 0 und 1) ).

Nehmen wir nun den roten Kanal.
Ob R = R0 + R1 , wirst du erhalten
R '= (R0 + R1)γ = R0γ * (1 + R1 / R0)γ

Wenn R0 viel größer als R1 ist, dann hast du
(1 + R1 / R0)γ ≈ 1 + γR1 / R0,
damit R '∈ R0γ + γ


40
2018-04-07 05:38





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. Für diese Browser sehen Sie eine Sache, und für andere Browser sehen Sie das vollständige Bild (mit der Birne im Hintergrund versteckt).

Ich sehe entweder ein Apfel / Birnen-Trickbild, oder ich sehe nur die Birne, abhängig davon, ob der Browser diese Gammadaten unterstützt.


9
2018-04-07 05:41





So wie es passiert, können Sie mehr Details in Bildern mit einem richtig kalibrierten Display sehen und wenn die Gamma / Helligkeit / Kontrast viel zu hoch ist, können Sie das Bild auf dem Bild sehen versteckt Mehr


1
2018-03-11 01:49