Archive pour le mot-clef ‘PNG’

[Découverte] Optimiser vos PNGs graphiquement sous Linux avec Trimage !

Dimanche 29 avril 2012

Dernièrement, en lisant mon fil Twitter, je suis tombée sur un tweet de l’ami @piouPiouM, connu pour ses tutoriels Gimp et son livre qui y est dédié. Il cherchait alors des utilitaires d’optimisation pour les JPG et les PNG. Moi qui suis toujours à l’affut d’utilitaires compatibles Linux pour optimiser les PNG pour mes éléments graphiques, un tweet m’a particulièrement attiré l’attention.

Le tweet en question parle d’un utilitaire graphique libre qui s’appelle Trimage. Écrit en Python avec la bibliothèque Qt, et distribué sous licence MIT et s’appuyant sur optipng et pngcrush, Trimage est disponible pour les principales distributions GNU/Linux. Un portage pour Windows et un autre pour Mac sont en cours, et des testeurs sont justement recherchés pour les tester et rapporter les bogues.

Fonctionnement de l’utilitaire

Trimage est assez simple à utiliser. En le lançant, vous allez avoir cette petite fenêtre :
Trimage au lancement

Ensuite, vous avez deux façons d’aller chercher les images.

La première consiste à cliquer sur le bouton « Add and compress » qui vous ouvrira la fenêtre vous permettant de parcourir vos dossiers et fichiers, puis choisir le ou les fichiers à compresser.
Trimage - Parcourir des fichiers

La deuxième consiste à un simple glisser-déposer des images sélectionnées depuis votre navigateur de fichiers (dont la fenêtre ne doit pas être en pleine grandeur)
Trimage - Glisser-déposer des fichiers

Une fois les images choisies, Trimage va les compresser pour enlever les informations superflues, notamment le gamma et les profils ICC, qui sont des plaies en webdesign. Cela peut prendre un certain temps si les images sont volumineuses.
Vous avez à la fin les résultats :
Trimage - Résultats

Pour les grosses images, il se peut que la baisse soit minime, mais ça en vaut la peine puisque vous n’aurez pas à vous battre avec des problèmes d’assombrissement sous IE (causé par le gamma) ou des problèmes de couleurs erronées sous Firefox (causé par les profils ICC) lorsque vous faites du webdesign avec Gimp ! Si vous voulez une compression plus forte, vous pouvez tenter de postériser vos images en réglant adéquatement pour que la perte soit aussi peu perceptible que possible, avant de les passer sous Trimage.

Voici un exemple de la différence que ça fait quand on optimise les images avant leur intégration.
Une image, avant et après Trimage
À gauche, vous voyez le rendu sous Firefox sans optimisation, et à droite, le rendu toujours sous Firefox, mais après optimisation. On voit vite que le bleu paraît violet à gauche, ce qui devient très problématique en webdesign. L’utilisation d’un outil d’optimasation en complément d’un éditeur d’image devient vite essentiel, surtout si votre logiciel ne permet pas de supprimer les profils ICC.

Cet utilitaire est donc à utiliser en complément à votre logiciel de graphisme, que ce soit pour le webdesign ou pour pour vos captures d’écran destinées à vos tutoriels en ligne !

Vous pouvez bien sûr utiliser la ligne de commande pour utiliser des options particulières. Vous les retrouverez sur le site officiel dont voici le lien :

http://trimage.org/

PNGCrush ou quand Y! Smushit ne suffit plus

Dimanche 26 septembre 2010

Ce soir, pour la première fois depuis que j’utilise Smushit pour optimiser mes images, je suis tombée sur un cas d’image PNG qui, bien qu’elle ait bien un problème d’affichage de couleurs chez moi, Smushit n’a trouvé aucun octet à enlever.

Je me retrouvais donc devant un problème puisque c’était le seul outil d’optimisation que j’utilisais jusqu’à maintenant.

La ligne de commande salvatrice

Je me souvenais que PNGCrush pouvait enlever les profils ICC qui sont sources de ces problèmes que j’ai, mais je n’avais pas trouvé dans le man quelles options taper pour enlever toutes les infos inutiles.

Mais puisqu’il me restait que ça comme solution, je me suis mise à faire une recherche sur Google en tapant « enlever profil ICC pngcrush » pour finalement tomber sur cet article de blog qui, bien qu’elle parle surtout du gamma et de Safari, donnait LA commande à taper pour enlever les informations colorimétriques superflues dans les images PNG !

Donc si vous êtes sur Linux et que vous faites vos images avec Gimp, installez d’abord pngcrush (pour Ubuntu – à adapter à votre distro) :

sudo apt-get install pngcrush

Ensuite, vous n’avez qu’à taper cette commande pour chacune de vos images PNG fraîchement enregistrée avec Gimp :

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB ancien_fond.png nouveau_fond.png

Et hop, plus de problème !

Retour sur les PNGs assombris – là cette fois, c’est la bonne

Vendredi 14 mai 2010

À la suite des commentaires par rapport à mon précédent article, je viens faire un retour là-dessus.

Réglé… ou presque

Puisque mes images s’affichaient correctement une fois le profil appliqué et que je n’avais pas eu de signalements de problèmes, je pensais que c’était totalement réglé.

Or, Florent.V, dans ses interventions autant ici que dans mon sujet sur Alsacréations, m’a fait remarquer que la solution que j’utilisais était risquée car le profil utilisé par le système pouvait varier d’un OS à l’autre, ce qui fait que mes images pouvaient aussi bien mal rendre sur Mac OSX par exemple, alors que ça rend bien sur Ubuntu 9.04.

L’optimisation – Oui, mais il faut trouver le bon outil

On m’a donc parlé de l’optimisation de mes images. J’avais déjà vu l’article d’Alsacréations à ce sujet et j’avais même déjà commencé à utiliser des outils en ligne de commande bien avant mon passage vers Firefox 3.6. Mais je croyais que mon problème n’avait rien à voir avec ce qui était évoqué avec l’article puisque les seuls sujets que je trouvais dataient de plusieurs années déjà.

De plus, mes tentatives avec optipng et pngcrush ne m’avaient pas permis de virer ce problème de couleur (mauvais paramètres ?). On me parlait de PNGOptimizer et d’autres scripts pour Windows, mais le hic c’est que je suis sur Linux !

On me parlait donc de Smushit, mais je ne l’avais pas encore essayé jusqu’à aujourd’hui puisque je pensais que les résultats allaient être aussi mitigés qu’avec optipng et pngcrush.

Ce n’est donc que ce soir que je l’ai essayé, en envoyant les 8 coins de mon cadrage du thème Provalentina pour finalement voir que… l’assombrissement a disparu, autant sous Firefox que sous Internet Explorer ! Cet outil enlève vraiment toute information de couleur superflue (gamma, profil ICC) en plus que le poids total a considérablement baissé, surtout avec deux morceaux qui ont été allégés de 90% !

Vous pouvez donc voir le résultat sur ce lien, où j’ai remplacé tous les morceaux du cadrage.

La leçon à retenir

Cette épisode qui aura duré plus d’un mois m’a fait voir l’importance d’optimiser mes images, et surtout, d’utiliser les bons outils pour l’optimisation, afin de prévenir tout problème de rendu.

Pour les webdesigners-gimpeurs, je vous donne donc le lien de l’outil en ligne Smushit, qui est à utiliser en complément avec Gimp : http://www.smushit.com/

Firefox 3.6 et les PNGs assombris – Dénouement !

Vendredi 7 mai 2010

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.

Assombrissement des PNG sous IE et FF - Comparatif

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 !