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

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

Voici l'image non corrigée. Les pixels "blanchâtres" de l'image de la pomme 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 en gamma. Les pixels "noirâtres" de l'image de la poire contiennent l'image d'une pomme, stockée à une intensité assez normale, mais réduite à un niveau proche du noir par 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 est indiscernable des pixels noirs qui l'entourent.

(Vous pouvez également voir des bandes de couleur sur la poire corrigée en gamma, car l'image non corrigée utilise une gamme beaucoup plus réduite de canaux de couleur).

Le fichier image PNG contient un chunk gAMA spécifiant une valeur gamma de 0,02. Lorsqu'elle est affichée sans correction gamma, l'observateur voit une pomme avec des pixels "blancs" intercalés, qui sont en fait la poire à son intensité originale (élevée).

Lorsqu'il est affiché avec la correction gamma, le spectateur voit une poire aux couleurs corrigées avec des pixels "noirs" qui sont en fait la pomme rendue à une valeur gamma beaucoup plus faible.

Les navigateurs qui affichent la poire effectuent une correction gamma sur l'image, tandis que les navigateurs qui affichent la pomme n'effectuent pas de correction gamma, mais l'affichent simplement avec ses valeurs de couleur littérales.

C'était un peu trop pour un commentaire, mais j'espère que cela vous aidera.

Je suis donc à peu près certain que ce problème concerne la façon dont les navigateurs interprètent les informations gamma avec les PNG. C'est un problème assez amusant qui traite des ambiguïtés des informations gamma en premier lieu.

L'article La triste histoire de la "correction" gamma du PNG fournit un très bon résumé des problèmes, des remèdes et d'autres faits amusants.

Ceci étant dit, nous pouvons en fait retirer l'information gamma d'une image en utilisant pngcrush

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

Donc avec l'information gamma et sans elle :

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

Modification du gamma ( ) d'une image consiste à modifier la valeur gamma en :

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

qui donne la couleur de sortie des pixels (R',G',B') affichée à l'écran après application de la fonction gamma aux valeurs initiales des pixels (R,G,B) (en considérant R,G et B 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, on obtient
R' R0 + R1

Pour un grand gamma, le second terme domine, de sorte que vous pouvez directement configurer R0 = composante rouge de la poire et R1 = composante rouge de la pomme, avec R0 beaucoup plus grand que R1 et vous obtiendrez les variations souhaitées en changeant le gamma de votre moniteur (ou la courbe gamma particulière que chaque logiciel utilise).

Il ne s'agit pas d'arrondir les pixels et les profils de couleur ICC ne sont pas en cause.

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

Je vois soit une image truquée pomme/poire, soit je ne vois que la poire, selon que le navigateur supporte ou non ces données gamma.

Il se trouve que l'on peut voir plus de détails sur les photos avec un écran correctement calibré. et si le gamma/luminosité/contraste est trop élevé, vous pouvez voir que la seule image de l'image est caché plus