Perché questa immagine PNG viene visualizzata in modo diverso in Chrome e Firefox rispetto a Safari e IE?

Dai un'occhiata a questa immagine:

Su Chrome e Firefox verrà mostrato come una pera. Ora, prova a salvarlo e guardalo salvato sul desktop. Inoltre, prova a visualizzare in Safari o Internet Explorer . Verrà visualizzato come una mela!

Prova a fare clic sull'immagine e spostarla. Noterai che appare la mela.

Perché succede?

Succede perché alcuni browser eseguono la correzione gamma come specificato nel file immagine.

Ecco l'immagine non corretta. I pixel "bianchi" nell'immagine della mela contengono l'immagine di una pera, memorizzata a un'intensità molto più elevata, cioè molto luminosa.

Ecco l'immagine con correzione gamma. I pixel "nero-ish" nell'immagine della pera contengono l'immagine di una mela, memorizzata ad un'intensità abbastanza normale, ma ridotta fino al nero vicino con la correzione gamma.

Sul mio schermo, vedo la pera debolmente tra i pixel bianchi nella prima immagine, ma nella seconda immagine, la mela è indistinguibile dai pixel neri che la circondano.

(Potresti anche vedere delle strisce di colore sulla pera con correzione gamma, perché l'immagine non corretta utilizza una gamma molto più piccola dei canali di colore.)

Il file di immagine PNG contiene un blocco gAMA che specifica un valore gamma del file di 0,02. Se visualizzato senza correzione gamma, lo spettatore vede una mela con pixel "bianchi" intervallati, che in realtà sono la pera alla sua intensità (alta) originale.

Se visualizzato con correzione gamma, lo spettatore vede una pera con correzione del colore con pixel "neri" che sono in realtà la mela resa con un valore gamma molto più basso.

I browser che visualizzano la pera eseguono la correzione gamma sull'immagine, mentre i browser che visualizzano la mela non eseguono la correzione gamma, ma la mostrano semplicemente con i suoi valori letterali di colore.

Questo è stato un po 'troppo per un commento, ma si spera che aiuti.

Quindi, sono abbastanza certo che questo problema riguarda il modo in cui i browser interpretano le informazioni gamma con i PNG. È un problema piuttosto divertente e affronta innanzitutto le ambiguità delle informazioni gamma.

L'articolo La triste storia di PNG Gamma "Correzione" fornisce un riassunto molto bello di problemi, rimedi e altri fatti divertenti.

Detto questo, possiamo effettivamente rimuovere le informazioni gamma da un'immagine usando pngcrush

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

Quindi con l'informazione gamma e senza di essa:

Non direi davvero che questa è "la risposta", ma probabilmente è nella giusta direzione. Sono sicuro che qualcuno con molta conoscenza dei profili colore e così via arriverà con una risposta più formale.

La modifica della gamma ( γ ) di un'immagine consiste nella modifica del valore gamma in:

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

che fornisce il colore del pixel di output (R ', G', B ') visualizzato sullo schermo dopo aver applicato la funzione gamma ai valori di pixel iniziali (R, G, B) (considerando R, G e B normalizzati tra 0 e 1 ).

Ora prendiamo ad esempio il canale rosso.
Se R = R0 + R1 , otterrai
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Se R0 è molto più grande di R1, allora hai
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
quindi R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Ciò significa che per una gamma vicina a 0, R0 ^γ domina. Per γ = 1, ottieni
R '≈ R0 + R1

Per una vasta gamma, domina il secondo termine, in modo che tu possa impostare direttamente R0 = componente rosso della pera e R1 = componente rosso della mela, con R0 molto più grande di R1 e otterrai le variazioni desiderate cambiando la gamma di il monitor (o la particolare curva gamma utilizzata da ciascun software).

Non è arrotondare i pixel e i profili di colore ICC non sono il problema.

È un'immagine ingannevole e alcuni browser visualizzano PNG senza dati gamma. Per quei browser, vedi una cosa, e per altri browser vedi l'immagine completa (con la pera nascosta sullo sfondo).

Vedo un'immagine di trucco mela / pera o vedo solo la pera, a seconda che il browser supporti questi dati gamma.

così come accade, puoi vedere più dettagli nelle immagini con un display calibrato adeguato e se la gamma / luminosità / contrasto è troppo alta, puoi vedere l'immagine nell'immagine è nascosta più