Jusqu’à la fin mars, j’étais encore sur Firefox 3.0 qui était installé par défaut sur ma Ubuntu 9.04. Or, en parcourant les articles de Branchez-vous.com, je tombe sur un article annonçant la fin du support de Firefox 3.0 le 30 mars cette année.
Jusque là, je n’osais pas mettre à niveau mon Firefox, car je n’étais pas sûre si ça allait bien se passer, surtout que je n’avais jamais fait de mise à niveau d’un logiciel sur une version donnée d’Ubuntu depuis mon passage vers Linux. Mais face à l’annonce, je me suis finalement décidée de le faire et je retranscrirai d’ailleurs l’article que j’avais écrit à ce sujet sur l’ancien blog.
Une fois les données sauvegardées et Firefox 3.0 enlevé pour laisser la place à Firefox 3.6 après deux tentatives avant de pogner le bon dépôt, tout est maintenant en place, mais lorsque je m’en vais visionner un de mes propres styles phpBB3, là c’est le drame : Tous mes PNGs étaient assombris ou avaient une couleur bizarre, et ça paraissait encore plus sur les images avec fausse transparence et les images ayant une couleur moyenne ! De ce fait, le cadrage que j’avais fait pour le tour de la page de mon style Provalentina était assombri, tandis que le fond de page d’un thème Forumactif que j’ai fait récemment était plus clair que la couleur qui était censé prolonger ce fond ! Ce problème n’apparaissait ni sur Opera, ni sur Internet Explorer.
Étant donné le fait que les PNG s’assombrissent sous Internet Explorer si on enregistre nos PNGs avec le gamma, j’ai donc l’habitude de toujours enregistrer sans gamma. Lorsque je me suis aperçue de ce problème sous Firefox 3.6, je me suis mise à tester en enregistrant le gamma et… ô surprise, les images ne s’assombrissaient pas sous FF, mais l’étaient sous IE.
Pour mieux vous monter, je vous ai fait un petit montage des captures que j’avais prises de mon style ProValentina. Dans ces captures, le bout de cadre du haut est enregistré avec gamma, et le reste du cadrage est enregistré sans gamma. Vous pourrez constater que le haut est assombri sous IE et que le reste est assombri sous FF 3.6. Juste au cas où votre configuration d’écran rende cette perception très difficile, j’affiche à la fois la version non modifiée du morceau de capture à gauche, et une version où j’ai renforcé le contraste à droite.
Cela me mettait donc dans un dilemme : Soit je prenais en compte IE, soit je prenais en compte FF, soit je sacrifiais tous mes PNGs. Je me mettais donc à faire ma petite enquête en allant demander à d’autres Firefox-users sur Alsacréations, phpBB-fr, Québec, puis finalement Geckozone, pour me rendre compte que certains avaient le problème, d’autres pas, suivant l’OS, voire même la distribution (dans le cas de Linux), la version et même le Service Pack utilisé ! Je pus moi-même le remarquer en démarrant Windows XP SP2 pour pouvoir tester sur la version Windows de Firefox 3.6 : Les PNGs n’étaient pas assombris avec le SP2, tandis que chez ceux qui ont la SP3, ils sont assombris !
Sur Geckozone, j’avais pu avoir une solution qui consistait à désactiver la gestion du mode des couleurs sous Firefox 3.6, mais cela ne réglait le problème que chez moi. Puis plusieurs jours plus tard, je tombe sur une réponse dans mon sujet que j’avais posté sur Alsacréations, où ça parlait d’encodage des images et où on me disait que mes images étaient en TrueColor.
Une histoire de profils
Suite à cela, puisque j’ai entendu parler des profils ICC dont vous pouvez en savoir plus dans cet article Wikipédia, j’ai fait des recherches pour finalement trouver de la documentation concernant l’utilisation de ces fichiers dans Gimp, et sur le fait que l’utilisation du mode sRGB est recommandée pour les éléments de design pour sites Web. Je cherche donc dans la documentation de Gimp pour finalement trouver ce lien où j’ai trouvé le fichier que j’utilise maintenant. Par contre, je ne me souviens plus trop lequel j’avais pris parmi les deux premiers puisque je l’ai renommé, mais il me semble que c’était le premier. En tout cas, les gimpeurs pourront tester, mais dans mon cas, une fois que j’ai chargé le fichier dans mes préférences de la gestion des couleurs, j’ai testé en assignant ce profil à l’un des morceaux du cadrage du style ProValentina tout en enregistrant sans gamma. Le résultat : Plus aucun assombrissement, que ce soit sous IE ou FF, comme vous pouvez le voir dans la partie gauche du cadrage ProValentina sur mon forum phpBB3 de tests.
Puisque j’ai fait le design de ce blog après la découverte, ce design en a donc bénéficié !
Cette aventure m’a aussi fait réaliser que je devrais utiliser plus souvent le GIF ou le PNG indexé pour les images ayant peu de couleurs afin de réduire le poids des images.
Maintenant, avec tout ça, il me faudra mettre à jour tout mes styles et designs pour corriger ce problème de couleurs, ouille !
Article très intéressant,
je ne connaissais pas ce genre de problèmes. Il me faudra donc aussi faire attention à mes PNG car j’en utilise pas mal.
J’avais déjà remarqué des différences de couleurs mais je pensais que cela venait des écrans. Merci en tous cas, je me pencherai sérieusement sur la question lors de la création d’un nouveau design.
Quand je m’en suis aperçue, ce problème n’était pas encore documenté sur les différents forums, d’où mes posts sur les forums cités.
Je confirme que ça ne vient pas de l’écran. Si c’était le cas, je l’aurais à la fois sur Ubuntu 9.04 et sur Windows XP SP2. Or, j’ai cet assombrissement sur Ubuntu, mais pas sur XP. Et en voyant les autres qui ont testé, j’aurais pu aussi bien avoir le problème sur XP si je l’avais upgradé à SP3, et ne pas l’avoir eu sur Ubuntu si j’étais sur Karmic au lieu de Jaunty.
Bonjour,
Il ne faut pas enregistrer l’image avec une information de profil colorimétrique (sRGB marchera globalement pour Linux et Windows mais posera problème sur mac…). Il faut au contraire expurger les fichiers image, que ce soit au format PNG ou JPEG, de toute information de correction de gamma ou de profil colorimétrique.
Un peu de lecture: http://www.alsacreations.com/astuce/lire/89-differences-couleurs-images-fonds.html
C’est justement en n’ayant aucun profil que ça foire sous Firefox 3 !
Prend ce lien : http://ishimaru-design.servhome.org/tests/phpBB3 et ensuite, prend l’un des coins et compare avec le morceau de gauche.
Je te mets le lien du sujet que j’avais posté sur Alsa et dont je suis sûre que tu ne l’avais pas vu : http://forum.alsacreations.com/topic-1-47878-1-PNG-assombris—Le-retour-du-comeback.html
Qu’est-ce qui te fais dire que les images, à l’adresse que tu donnes (et pour laquelle je peux voir des décalages de couleur sous Firefox 3.6, OSX), ne contiennent aucune information de profil colorimétrique? Je viens d’ouvrir deux images avec un héditeur hexadécimal, et toutes les deux contiennent un bloc « sRGB ».
Réponse complémentaire sur le forum.
Peut-être qu’en utilisant PNGOptimizer, tu aurrais résolu ton problème?
C’est un outil bien pratique, je crois qu’il fait exactement ce que préconise florent v: il retire toutes les infos de corrections et de couleurs des fichiers PNGs.
@Florent : Le gars dans le sujet me disait qu’ils étaient en TrueColor, donc je pensais qu’il voulait dire qu’il n’y avait aucun profil. Ton éditeur hexadécimal est-il compatible Linux ?
Sinon, je vais essayer smushit pour voir si ça le règle.
[EDIT] J’ai fini par poster un schéma dans ma réponse, vu cette impression de n’être jamais assez explicite dans mes explications.
@Miklfe : Il me semble que PngOptimizer n’est disponible que pour Win, non ? Car je suis sous Linux et jusqu’à maintenant, j’ai essayé avec optipng et pngcrush sans grand succès (mauvais paramètres ?)