¿Por qué esta imagen PNG se muestra de manera diferente en Chrome y Firefox que en Safari e IE?

Mira esta imagen:

En Chrome y Firefox se mostrará como una pera. Ahora, intente guardarlo y verlo guardado en su escritorio. Además, intente ver en Safari o Internet Explorer . ¡Se mostrará como una manzana!

Intenta hacer clic en la imagen y moverla. Notarás que aparece la manzana.

¿Por qué pasó esto?

Ocurre porque algunos navegadores realizan la corrección gamma como se especifica en el archivo de imagen.

Aquí está la imagen sin corregir. Los píxeles "blanco-ish" en la imagen de la manzana contienen la imagen de una pera, almacenada a una intensidad mucho mayor, es decir, muy brillante.

Aquí está la imagen con corrección gamma. Los píxeles "negros" de la imagen de pera contienen la imagen de una manzana, almacenada a una intensidad bastante normal, pero reducida a casi negro con la corrección gamma.

En mi pantalla, puedo ver débilmente la pera entre los píxeles blancos en la primera imagen, pero en la segunda imagen, la manzana es indistinguible de los píxeles negros a su alrededor.

(También puede ver algunas bandas de color en la pera con corrección de gamma, porque la imagen sin corregir está usando un rango mucho más pequeño de los canales de color).

El archivo de imagen PNG contiene un fragmento de gAMA que especifica un valor de gamma de archivo de 0.02. Cuando se muestra sin corrección de gamma, el espectador ve una manzana con píxeles "blancos" intercalados, que en realidad son la pera en su intensidad original (alta).

Cuando se muestra con corrección de gamma, el espectador ve una pera con corrección de color con píxeles "negros" que en realidad son la manzana renderizada a un valor de gamma mucho más bajo.

Los navegadores que muestran la pera están realizando la corrección de gamma en la imagen, mientras que los navegadores que muestran la manzana no están realizando la corrección de gamma, sino que solo la muestran con sus valores de color literales.

Esto fue demasiado para un comentario, pero espero que ayude.

Por lo tanto, estoy bastante seguro de que este problema trata de la forma en que los navegadores interpretan la información gamma con PNG. Es un problema bastante divertido y, en primer lugar, trata las ambigüedades de la información gamma.

El artículo The Sad Story of PNG Gamma "Correction" proporciona un resumen muy agradable de los problemas, remedios y otros datos curiosos.

Dicho esto, en realidad podemos quitar la información gamma de una imagen usando pngcrush

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

Entonces, con la información gamma y sin ella:

Realmente no diría que esta es "la respuesta", pero en todo caso, probablemente esté en la dirección correcta. Estoy seguro de que alguien con mucho conocimiento sobre los perfiles de color, etc., tendrá una respuesta más formal.

Cambiar la gamma ( γ ) de una imagen consiste en modificar el valor gamma en:

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

que proporciona el color de píxel de salida (R ', G', B ') que se muestra en la pantalla después de aplicar la función gamma a los valores de píxel iniciales (R, G, B) (considerando R, G y B normalizados entre 0 y 1 )

Ahora, tomemos el canal rojo, por ejemplo.
Si R = R0 + R1 , obtendrá
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Si R0 es mucho más grande que R1, entonces tienes
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
entonces R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Esto significa que para gamma cercano a 0, R0 ^γ domina. Para γ = 1, obtienes
R '≈ R0 + R1

Para una gamma grande, domina el segundo término, de modo que puede configurar directamente R0 = componente rojo de la pera y R1 = componente rojo de la manzana, con R0 mucho más grande que R1 y obtendrá las variaciones deseadas al cambiar la gamma de su monitor (o la curva de gamma particular que usa cada software).

No se trata de redondear píxeles y los perfiles de color ICC no son el problema.

Es una imagen engañosa, y algunos navegadores muestran PNG sin datos gamma. Para esos navegadores, ves una cosa, y para otros navegadores ves la imagen completa (con la pera oculta en el fondo).

Veo una imagen de truco de manzana / pera, o simplemente veo la pera, dependiendo de si el navegador admite estos datos gamma.

a medida que sucede, puede ver más detalles en imágenes con una pantalla calibrada adecuada y si la gama / brillo / contraste es demasiado alta, puede ver que una imagen de la imagen está oculta más