Internet Explorer, les PNG et le gamma

Désolé pour ce billet on ne peut plus geek. Mais ça m’a fait perdre tellement de temps aujourd’hui que je me dis que mes mésaventures peuvent aider d’autres personnes.

Des images affichées différemment sous IE et sous Firefox

Tout à commencé avec une image qui ne s’affichait pas de la même manière sous Internet Explorer et sous Firefox. Il se trouve que cette image était au format PNG.

Rien de bien grave, les couleurs semblaient différentes, un poil plus sombres. Quelque chose qui s’apparente à un bug de gestion de profils de couleurs. Ceux qui ont déjà publié des images sur internet peuvent avoir rencontré ce genre de problème : les couleurs semblent plus ternes (surtout dans les bleus). On a l’impression de ne pas voir la même image sur son ordinateur en local que l’image publiée.

Ces différences sont surtout visibles lorsqu’on juxtapose les deux couleurs (celle qui devrait être affichée et celle réellement affichée).

La même couleur attendue et affichée par Internet Explorer

La même couleur attendue et affichée par Internet Explorer

En général, c’est parce qu’on publie une photo dans un espace de couleur autre que sRGB (typiquement Adobe RGB, ou d’autres). Or il se trouve que ce n’était pas mon cas.

Connaitre les informations techniques d’une image

Pour info, si vous voulez connaitre le profil de couleur utilisé par une image, son mode de compression, son taux de compression (etc), vous pouvez utiliser ImageMagick, et plus précisément l’utilitaire identify.

identify -verbose monImage.png

La valeur de gamma

Les fichiers PNG peuvent embarquer certaines données sur l’espace de couleur utilisé par l’image. Il peut ainsi contenir son profil ICC, ou indiquer simplement que l’espace sRGB est utilisé. Le point blanc peut être spécifié, ou encore la valeur de la correction de gamma (grosso‐modo une correction de contraste).

Il se trouve que cette valeur n’est pas obligatoire dans un fichier PNG. Mais si elle est présente, Internet Explorer décide de corriger l’image avec une valeur de gamma de 1,93. Oui, c’est comme ça, 1.93 et puis c’est tout, même si dans le fichier, il est écrit une autre valeur. On est comme ça chez Microsoft.

Le principal impact de cette décision, est que, d’abord, on ne voit pas la même chose sur tous les navigateurs. Et ensuite, la même couleur RGB dans un fichier image et dans une feuille de style CSS ne donnent pas le même affichage à l’écran. Ce qui est gênant dans le cas d’images utilisées dans le cadre du style d’une page web.

Comment corriger le problème

Il faut supprimer la valeur de gamma intégrée dans le fichier PNG. Pour cela, utiliser l’utilitaire pngcrush qui permet d’éditer, de supprimer ce genre d’informations.

pngcrush -rem gAMA monImage.png monImageSansGamma.png

Cette ligne de commande permet de retirer l’information de gamma dans le fichier png. Si vous ouvrez l’image avec internet explorer, elle sera affichée avec les «vraies» couleurs.

Laisser un commentaire