D'où viennent les différences de couleurs entre mes images et mes background CSS ?

Astuce par (Lyon, France)
Créé le , mis à jour le (31688 lectures)
Tags : design, images, couleurs, background, png, jpeg

Lorsque vous intégrez vos designs avec HTML et CSS, vous avez recours à des images dans divers formats (JPEG, GIF, PNG...) ainsi qu'à des couleurs en CSS (bordures, couleurs de fond, couleurs du texte). Dans certains cas, il arrive qu'une même couleur (avec le même code RGB) ne s'affiche pas à l'identique entre une couleur de fond et une image JPEG, ou entre une image JPEG et une image PNG.

Ces problèmes viennent en général des informations de colorimétrie contenues dans certaines images, et que certains navigateurs interprètent. C'est le cas notamment de Safari, et dans certains cas d'Internet Explorer ou de Firefox 3.

Les coupables

Les formats d'images concernés sont essentiellement le JPEG et le PNG (PNG-8 et PNG-24). Il y a, pour l'essentiel, deux types d'informations de colorimétrie qui peuvent être contenues dans vos images:

  1. l'identifiant d'un profil ICC (formats JPEG et PNG);
  2. un indice de correction gamma (format PNG).

(Pour plus d'informations: se reporter aux deux premiers liens explicatifs ci-dessous.)

Les solutions

Si vous utilisez un outil tel que Photoshop ou Fireworks, exportez toujours vos images avec les fonctionnalités d'enregistrement pour le Web (Photoshop) ou d'optimisation (Fireworks). Pour Photoshop, il faudra également décocher l'option «Profil ICC» pour l'export au format JPEG.

Si votre éditeur d'images ne gère pas cet aspect, et le gère mal ou pas dans tous les cas, il vous faudra utiliser un logiciel séparé pour retraiter vos images.

Pour le PNG, on peut signaler PNGOptimizer (Windows) ou pngcrush (tous systèmes, utilitaire en ligne de commande) utilisé avec les bons paramètres (voir deuxième lien explicatif ci-dessous). D'autres outils existent pour la compression du PNG, mais ne gèrent pas forcément les informations de colorimétrie. Notons que ces divers outils permettent de réduire le poids des images PNG.

Notons enfin que Smush It (outil en ligne pour la compression sans perte des images, proposé par Yahoo) supprime les informations de colorimétrie des images JPEG et PNG. C'est un des meilleurs outils disponibles à l'heure actuelle.

Ce billet en parle : Optimisez vos images avec smushit !

Mise à jour : voici un autre service de compression proposé par Gracepoint After Five : Puny PNG (traite les formats PNG, JPEG et GIF).

Ressources