Archive pour le mot-clef ‘optimisation’

[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/