Afin de tester la gestion de la couleur de différents navigateurs, nous avons procédé à deux tests, le premier portant sur la prise en compte des profils ICC intégrés dans les images, le deuxième sur la gestion des profils ICC d’écrans.
 
Les tests ont été réalisés dans les mêmes conditions, sur une même machine (Windows 7 Pro 64 bits), sur le même écran (HP LP3065 avec profil ICC) avec les navigateurs suivants dans leur configuration par défaut :

 

  • Mozilla Firefox 4.0
  • Mozilla Firefox 3.6.15
  • Microsoft Internet Explorer 9.0.8112.16421 (32 et 64 bits)
  • Google Chrome 10.0.648.151
  • Apple Safari 5.0.4
  • Opera 11.01 1190

 

Le codage des couleurs

 

En informatique, une image est exprimée comme une somme de trois couleurs primaires (rouge, vert et bleu), généralement codées sur 8 bits par primaires. En soit cette information ne suffit pas pour savoir comment ces couleurs doivent être affichées.
 
Pour cela et pour obtenir un affichage cohérent entre différents appareils il a été nécessaire de mettre en place des normes. La plus utilisée en informatique et celle qui est normalement utilisée pour le web est le sRGB. Pour cela elle donne les coordonnées des couleurs primaires et du blanc dans l’espace colorimétrique CIE xyY ainsi que les formules à appliquer pour calculer les valeurs RVB d’une couleur à partir de cet espace.
 
C’est dans un plan de cet espace xyY qu’on représente généralement le gamut d’un écran, l’ensemble des couleurs qu’il peut afficher (la luminance Y n’est pas prise en compte).

 

Gamut d'un écran

 

Le triangle noir représente l’ensemble des couleurs affichables en sRGB, le triangle blanc représente les couleurs affichables par l’écran.

 

Les profils ICC

 

Un profil ICC caractérise la manière dont un périphérique affiche les couleurs. En simplifiant, un profil ICC contient une correspondance entre des valeurs RVB et une couleur exprimée dans un espace colorimétrique tel que le CIE LAB ou le CIE XYZ. Grâce à un profil ICC on va pouvoir ainsi appliquer des corrections sur chaque périphérique pour garantir un affichage similaire entre les périphériques (imprimante, écran, scanner …).
 
En intégrant un profil ICC dans une image, on définit ainsi comment doivent être affichées les couleurs de l’image. Sur le web, une image devrait être affichée par défaut en sRGB en l’absence de profil pour un autre espace (Adobe RGB par exemple, plutôt utilisé par les professionnels).
 
Pour créer un profil ICC pour un écran, on utilise une sonde qui va permettre d’établir une correspondance entre les données RVB envoyées à l’écran et les couleurs mesurées par la sonde. Les logiciels pourront ensuite utiliser ce profil ICC afin de corriger les valeurs RVB envoyées à l’écran pour que celui-ci affiche les couleurs les plus proches de celles définies dans l’image.
 
Concrètement, si on prend l’écran dont le gamut est représenté sur l’image précédente, on observe que l’extrémité verte du triangle blanc est très éloignée de l’extrémité verte du triangle noir (sRGB). Afin d’afficher un vert proche du vert idéal, les logiciels vont donc pouvoir, grâce au profil ICC de l’écran, trouver la valeur RVB permettant d’afficher le vert désiré. Ainsi dans le cas de notre écran pour afficher du vert sRGB on ne doit pas lui envoyer les valeurs RVB 0,255,0 mais RVB 148,250,77.

 

Support des profils ICC intégrés aux images

 


Version des profils ICC supportés

 

Le test de l’International Color Consortium « Is your system ICC Version 4 ready? » affiche une image en 4 parties utilisant chacune un profil ICC différent. L’image affichée par le navigateur permet de déterminer si le navigateur est capable d’utiliser le profil ICC intégré à l’image et quelles versions de l’ICC sont supportées (v2 et v4).

 

Voici à quoi doit ressembler l’image dans les différents cas :

 

Référence

 

Et voici ce qu’affichent les différents navigateurs :

 

Affichage des navigateurs d'images avec profil ICC

 

Sur ce test, il n’y a pas d’évolution entre Firefox 3 et Firefox 4. Internet Explorer intègre le meilleur support tandis que Chrome et Opera font figure de mauvais élève.

 

Utilisation des profils ICC d’écran

 

Certains navigateurs savent donc utiliser un profil ICC intégré dans une image. Mais pour peu qu’on ait un écran calibré avec une sonde, on peut aussi se demander si l’affichage des pages web dans leur intégralité est correct et tire partie du profil ICC de l’écran.

 

Pour ce test nous affichons une page web ayant comme couleur de fond du vert pur (code HTML #00FF00) entourant une image au format JPEG de même couleur (RGB 0,255,0) intégrant un profil ICC sRGB.

 

1) Dans le cas idéal, le navigateur utilise le profil ICC de l’écran pour corriger l’affichage de toute la page afin d’afficher des couleurs proches des références sRGB, l’affichage devrait ressembler à ça (image et fond confondus) :

 

Rendu parfait

 

2) Dans le cas inverse, le navigateur n’apporte aucune correction et affiche le vert natif de l’écran. On devrait alors voir ceci (image et fond confondus mais vert beaucoup trop saturé, comme illustré via le gamut de l’écran posté en début d’article) :

 

Mauvais rendu

 

3) Dans le cas où seulement l’image est affichée en sRGB :

 

Rendu intermédiaire

 

Et voilà l’affichage de la page via les différents navigateurs :

 

Chrome
Rendu sRGB sous chrome : mauvais

 

Firefox 3.6
Rendu sRGB sous Firefox 3.6 : mauvais

 

Firefox 4
Rendu sRGB sous Firefox 4 : bien pour l’image mais pas pour le reste de la page

 

IE9
Rendu sRGB sous IE9 : mauvais

 

Opera
Rendu sRGB sous Opera : mauvais

 

Safari
Rendu sRGB sous Safari : bien pour l’image intégrée mais pas pour le reste de la page

 

En conclusion

 

On voit donc une amélioration de Firefox 4 sur la gestion de la colorimétrie et une avance sur la plupart des autres navigateurs, il arrive maintenant au niveau de Safari.  Les puristes apprécieraient toutefois le même traitement pour tout ce qui est affiché sur le navigateur et non pas seulement les images. Aucun navigateur ne semble à l’heure actuelle considérer les couleurs CSS comme du sRGB (en partie pour des questions de performances et d’intégration avec des plugins tels que flash semble-t’il, du moins chez apple).
 
Pour l’illustration nous avons volontairement utilisé un écran wide gamut accentuant fortement les différences par rapport au sRGB. Sur la plupart des écrans les écarts de couleurs ne sont pas aussi marqués.
 
A la décharge des éditeurs des différents navigateurs, la gestion des profils de couleurs de windows est loin d’être parfaite, la prise en charge des profils étant à intégrer dans chaque logiciel, celle ci n’étant pas appliquée par l’OS à tous les programmes. Par exemple, la visionneuse de photo de windows 7 les gère correctement, mais pas Paint. De plus aucune norme ne définit pour le moment une gestion de profils de couleurs du contenu CSS.
 
Le cas d’IE9 est particulier, bien qu’il soit le seul à intégrer le support des profils ICC v2 et v4 des images , il est incapable d’utiliser celui de l’écran pour un affichage fidèle des couleurs.

 
C’est bien
 

  • Support des profils ICC intégrés aux images (v2 seulement)
  • Capable d’utiliser les profils ICC d’écran

 

C’est pas bien
 

  • Pas de support des profils ICC v4
  • L’utilisation des profils de couleurs d’écran n’est réservé qu’aux images et pas aux pages entières

Les commentaires sont fermés !