Pourquoi cette image PNG s'affiche-t-elle différemment dans Chrome et Firefox par rapport à Safari et IE?

Vérifiez cette image:

Sur Chrome et Firefox, il apparaîtra comme une poire. Maintenant, essayez de le sauvegarder et regardez-le enregistré sur votre bureau. Essayez également de visualiser dans Safari ou Internet Explorer . Il affichera comme une pomme!

Essayez de cliquer sur l'image et de la déplacer. Vous remarquerez que la pomme apparaît.

Pourquoi cela arrive-t-il?

Cela se produit parce que certains navigateurs effectuent la correction gamma spécifiée dans le fichier image.

Voici l'image non corrigée. Les pixels "blancs" de l'image Apple contiennent l'image d'une poire, stockée à une intensité beaucoup plus élevée, c'est-à-dire très lumineuse.

Voici l'image corrigée par les gamma. Les pixels "noirs" de l'image de poire contiennent l'image d'une pomme, stockée à une intensité relativement normale, mais réduite au noir avec la correction gamma.

Sur mon écran, je peux voir la poire faiblement parmi les pixels blancs de la première image, mais dans la deuxième image, la pomme ne se distingue pas des pixels noirs qui l’entourent.

(Vous pouvez également voir des bandes de couleur sur la poire à correction gamma, car l'image non corrigée utilise une plage beaucoup plus petite des canaux de couleur.)

Le fichier image PNG contient un bloc gAMA spécifiant une valeur gamma de fichier de 0,02. Lorsqu'il est affiché sans correction gamma, le spectateur voit une pomme avec des pixels "blancs" intercalés, qui sont en réalité la poire à son intensité (élevée) d'origine.

Lorsqu’il est affiché avec correction gamma, l’observateur voit une poire à couleur corrigée avec des pixels «noirs» qui sont en réalité la pomme rendue avec une valeur gamma beaucoup plus basse.

Les navigateurs qui affichent la poire effectuent une correction gamma sur l'image, tandis que ceux qui affichent la pomme ne procèdent pas à la correction gamma, mais la montrent simplement avec ses valeurs de couleur littérales.

C'était un peu trop pour un commentaire, mais j'espère que ça aide.

Je suis donc à peu près certain que ce problème concerne la manière dont les navigateurs interprètent les informations gamma avec les fichiers PNG. C'est un problème assez amusant qui aborde les ambiguïtés de l'information gamma en premier lieu.

L’article « La triste histoire de PNG Gamma« Correction » fournit un très bon résumé des problèmes, des solutions et d’autres faits amusants.

Cela dit, nous pouvons réellement supprimer les informations gamma d’une image en utilisant pngcrush

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

Donc, avec les informations gamma et sans elles:

Je ne dirais pas vraiment que c'est "la réponse", mais si quelque chose est probablement dans la bonne direction. Je suis sûr que quelqu'un ayant beaucoup de connaissances en matière de profils de couleurs, etc., apportera une réponse plus formelle.

Changer le gamma ( γ ) d’une image consiste à modifier la valeur gamma en:

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

qui donne la couleur de pixel de sortie (R ', G', B ') affichée à l'écran après application de la fonction gamma aux valeurs de pixel initiales (R, V, B) (en considérant que R, V et B sont normalisés entre 0 et 1 ).

Maintenant, prenons le canal rouge par exemple.
Si R = R0 + R1 , vous obtiendrez
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Si R0 est beaucoup plus grand que R1, alors vous avez
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
donc R 'R0 ^γ + γ R1 * R0 ^γ-1

Cela signifie que pour un gamma proche de 0, R0 ^γ domine. Pour γ = 1, vous obtenez
R 'R0 + R1

Pour un grand gamma, le deuxième terme domine, de sorte que vous pouvez configurer directement R0 = composant rouge de la poire et R1 = composant rouge de la pomme, avec R0 bien plus grand que R1 et vous obtiendrez les variations souhaitées lors du changement de gamma de votre moniteur (ou la courbe gamma particulière utilisée par chaque logiciel).

Ce n'est pas arrondir les pixels et les profils de couleur ICC ne sont pas le problème.

C'est une image astucieuse, et certains navigateurs affichent des PNG sans données gamma. Pour ces navigateurs, vous voyez une chose et pour les autres navigateurs, l'image complète (avec la poire masquée à l'arrière-plan).

Je vois soit une image astuce pomme / poire, soit je vois juste la poire, selon que le navigateur prend en charge ces données gamma.

Bien que cela se produise, vous pouvez voir plus de détails dans les images avec un affichage correctement calibré et si le gamma / luminosité / contraste est trop élevé, vous pouvez voir que l'image dans l'image est cachée plus