Il y a encore peu de temps pour vérifier les images d’un site je prenais Firebug, je téléchargeais toutes les images une à une, puis je tentais de retirer les méta données avec PNGcrush ou un équivalent (en fait plusieurs parce que les images donnent parfois de meilleurs résultats sur un outil parfois sur un autre). Sur celles qui apparaissent avec un mauvais format ou qui semblent toujours trop grosses, je sors mon photoshop pour changer ça, par exemple pour diminuer le nombre de couleurs.
Heureusement tout ça est fini. C’est toujours quand on rêve de faire un outil que quelqu’un sort ça le lendemain, donc voilà, ce coup ci ce sont Stoyan Stefanov et Nicole Sullivan qui ont commis smushit.
Un outil en ligne
Smushit c’est un site sur lequel vous envoyez votre image. Il vous retourne immédiatement une image optimisée en vous indiquant le gain en poids sur le fichier. Parce qu’un outil automatique ne pourra jamais faire des choix de qualité, la recompression est sans perte, les images seront les mêmes au pixel près.
Mais le côté vraiment nouveau c’est une extension Firefox qui sur votre demande va lister toutes les images utilisées par la page courante et les envoyer à smushit. Là vous avez une grille de résultat avec chaque image, le poids final de l’image, combien vous avez gagné, et un gros zip contenant les images optimisées.
Magique. En trois minutes, installation de l’extension comprise, vous avez un audit complet de vos images, et le travail est déjà fait pour améliorer la situation. En cinq minutes de plus vous remplacez les anciennes images par les nouvelles et vous avez fait un travail exceptionnel.
Des résultats ahurissants
Pour rappel le poids de la page HTML et des feuilles de style ou javascript est souvent négligeable ou équivalent au poids total des images. Améliorer la situation même d’un peu sur les images, c’est améliorer la situation globale pour l’utilisateur.
Alors j’ai mené deux tests pour vous, Pages jaunes et Orange. Sur les deux on peut gagner environ 25% sur le poids total des images. C’est respectivement 30ko et 57ko qu’on gagne. En jouant avec la qualité et le nombre de couleurs on peut certainement aller bien plus loin. Dans le second on reste avec des images de plus de 20ko donc on doit pouvoir monter facilement à 75ko ou même 100ko au total si on joue sur des baisses de qualité non perceptibles à l’oeil nu ou qu’on fait quelques sprites.
Je ne sais pas si vous vous représentez bien ce que ça fait mais dans les deux cas le gain représente plus de 10% du poids total de la page, css html et javascript compris. Dites à votre responsable que vos pages sont 10% moins lourdes sans différence de qualité pour 2 heures de travail (pause café comprise), il va vous sauter dans les bras. C’est justement ce que smushit vous propose de faire.
Ah justement je viens de tester smushit que m’avait envoyé 20cent il y a quelques jours… Effectivement c’est très bien !
Pour l’instant j’utilise toujours PNGOptimizer, je n’ai pas d’amélioration en rebalançant les images traitées à smushit. Tu as des données sur les différences de gain de poids suivant les softs utilisés ? Ou c’est aléatoire ?
Je pense que tu peux le signaler aux Pages Jaunes et à Orange 🙂
D’ailleurs, combien d’économie (financière, bande passante,…) cela représenterait-il pour eux ? Ce serait intéressant de le savoir.
Bien que le service soit très sympathique, c’est un peu gênant de dépendre d’un site externe (enregistrement des images, surcharge du site en question). Comme le dit Soyan Stefanov sur son blog, Yahoo a déjà documenté les outils utilisés derrière avec les lignes de commande qui vont bien : http://developer.yahoo.com/performance/rules.html#opt_images . Utile pour automatiser le processus.
Derrière c’est du pngcrush (pour les PNG et les gif réécrits en PNG), du jpegtran pour les JPEG, et du gifsicle pour les gif animé (il s’agit de retirer les pixels qui ne bougent pas entre deux frames).
On a déjà parlé des deux premiers ici, le troisième j’ai un billet en préparation mais ceux qui suivent mon flux performance sur diigo ont déjà du voir passer le lien il y a quelques jours.
Pour ce qui est de la version en ligne de commande, il suffit d’utiliser les outils ci-dessus. Smushit n’est à mon sens pas un outil à garder comme firebug mais plus un outil pour rattrapper une situation bancale. Une fois que la prise de conscience est faite et que le pire est réparé, pngcrush et jpegtran sont à intégrer directement dans votre chaine de publication de chaque image. Ca doit être soit automatisé soit dans le process à suivre pour votre graphiste ou votre intégrateur. Il ne devrait plus y avoir besoin d’aller vérifier le site via une extension du navigateur, le travail est à faire en amont.
Manquerait-il d’un outil qui allierait pngcrush, jpegtran et gifsicle ? Avec une interface graphique, carrément ?
Personnellement j’obtiens encore de bien meilleurs résultats en ajoutant une étape supplémentaire dans le processus : générer un fichier .gz par image.
Aussi curieux que cela puisse paraître on peut gagner pas mal sur un png déjà optimisé. Parfois 30% !
Evidemment cela doit s’accompagner du .htaccess qui va bien.
Il y a de cela quelques mois, j’avais fait un petit comparatif de tous les outils d’optimisation de png que j’avais pu trouver. Il en était resorti que celui me donnant les meilleurs résultats était ScriptPNG, trouvable par ici :
http://www.css-ig.net/download/
Je n’arrive pas à trouver la commande qui va bien pour avoir des résultat probant avec gifsicle. Vous lui passez quels parametres ?
La version CS4 de Photoshop a des options pour enlever les métadonnées des PNG, ce qui fait que quand on enregistre sur le web en PNG 8 avec les bonnes options, smushit me dit qu’il ne peut pas mieux faire. C’est un truc à dire à tous les graphistes.