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


675

Vérifiez cette image:

Pomme ou poire

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?


5
si j'essaie juste de faire glisser l'image sur Firefox juste un petit peu, l'image traînée de manière transparente fera la forme de la pomme aPear
ajax333221

1
Comment as-tu créé cette photo? Pouvez-vous m'indiquer un site web?
tumchaaditya

10
Pour les futurs lecteurs, cela semble être corrigé dans les versions actuelles d'IE.
Kat

2
Mais vous pouvez toujours le télécharger sur votre bureau et y voir Apple, puis le visualiser dans Firefox, Chrome en tant que poire.
Jet

Réponses:


534

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.


14
Une lecture recommandée sur le sujet: le célèbre article d’Eric Brasseur intitulé "Erreur de gamma lors de la mise à l’échelle de la photo .
ulidtko

1
@ulidtko C'est maintenant un 404. En voici une copie sur Web Archive .
Cole Johnson

229

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:

poire une pomme

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.


3
Ces deux images me ressemblent, scintillant entre pomme et poire, tout comme l'original de la question. J'utilise Safari 6.0.2
Fraser Graham le

1
Notez que les deux derniers éléments de la commande fournie ici sont le infileet outfile: eg pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. Plus d'infos: hsivonen.fi/png-gamma
fredrivett

40

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

(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).


9

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.


1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.