Outil web : passez vos images au régime Dukan !

Encore et toujours un RRW qui prend la parole sur Noviseo, et aujourd'hui c'est Guillaume qui nous explique comment réduire le poids des images. En plus de ça, il nous offre un outil pour faire ça en masse, elle est pas belle la vie ?

À l'instar de Justin que vous avez découvert la semaine dernière, Guillaume est aussi alsacien pure souche. Fumeur sans Zippo, Guillaume sort d'une fac d'anglais et a appris sur le tas tout ce qui s'approche plus ou moins de la technique web. Il va d'ailleurs vous montrer ça dès maintenant.

Résultat GTMetrix

Bonjour à tous les lecteurs de Noviseo et merci à Sylvain de m’avoir donné la possibilité d’écrire sur son blog. Aujourd’hui, Je vais approfondir un sujet qui me tient à cœur et que je cherche constamment à optimiser : le temps de chargement. Je ne vais pas m’attarder sur les nombreux aspects qui entrent en jeu, la sphère francophone regorge d’articles qui devraient vous satisfaire ! Je m'attaque à la réduction du poids des images, mais promis je fais ça bien !

Réduire le poids de ses images

Un des plus importants « speed killer » du web est sans conteste l’utilisation d’images (le plus important selon moi étant l’intégration des réseaux sociaux). Une fois que vous avez bien spécifié leurs dimensions, externaliser leurs hébergements et créer des sprites, il s’agit encore d’un facteur omniprésent dans les timelines de vos outils préférés. Même si les quelques conseils qui vont suivre ne feront pas de miracle de ce point de vue là, vous aurez au moins le mérite d’avoir (presque) tout fait pour les optimiser au maximum.

Des données cachées dans nos images ? Attaquons-les en justice !

La plupart d’entres vous le savent, mais un petit rappel ne fera pas de mal. Les images au format jpg renferment des métadonnées EXIF invisibles qui peuvent représenter jusqu’à 30% du poids total d’une image. Il s’agit d’informations comme :

  • le modèle de l’appareil photo à l’origine de l’image ;
  • la date de création ;
  • les données GPS lors de la prise de la photo ;
  • et bien d’autres.

Supprimer ces données inutiles pour vos sites web vous fera gagner un poids précieux sans aucune perte ou modification de la qualité de votre image. Quand on voit l’impact que peut avoir quelques millisecondes sur le business web, il est dommage de passer à côté de ça.

Quels outils utiliser ?

« On veut bien les supprimer ces données nous, mais on fait comment ? »

Je suis rapidement tombé sur un outil dont vous avez sûrement déjà entendu parler et que j’ai utilisé pendant quelques jours : Smushit.

Développé par Yahoo!, cet outil est vraiment excellent et vous avez l’assurance que votre image sera optimisée au maximum quand on voit les efforts qu’ils ont dédié à son développement. C’est pourquoi il m’a servi de « modèle » dans ma recherche d’outils plus performants car il a deux gros défauts qui font fuir n’importe qui :

  • les serveurs où il est hébergé sont à la ramasse complet, on voit que ce n’est pas une priorité pour Yahoo! (et c’est bien normal) ;
  • il n’est vraiment pas fait pour de l’optimisation de masse, ce qui est un gros problème lorsque vous arrivez sur un site qui possède des centaines ou des milliers d’images à optimiser.

On passe aux choses sérieuses

Tout d’abord, je présente mes excuses aux utilisateurs de Mac et Linux, les outils que je vais vous présenter ne fonctionnent que sur Windows. Ils peuvent être adaptés mais j’ai déjà eu du mal à les faire fonctionner comme je le voulais et mes connaissances en scripts shell (équivalent d’un script batch que l’on va utiliser dans les prochains paragraphes, mais pour les noyaux Unix) ne sont pas assez poussées. Ces outils ont plusieurs avantages :

  • strictement aucune modification de la qualité des images ;
  • open-source ;
  • automatisés, vous pouvez optimiser des milliers d’images à la fois et ils respectent la structure des répertoires.

Nous avons un outil pour les images JPG et un outil pour les images PNG, ils fonctionnent tous les deux sur le même principe et se lancent dans l’invite de commandes de Windows.

  1. Vous téléchargez le dossier parent qui contient toutes les images du site directement dans le dossier local que vous aurez choisi.
  2. Vous lancez les deux scripts l’un après l’autre.
  3. Toutes les images contenues dans tous les sous-dossiers sont dorénavant optimisées et sont strictement identiques visuellement.
  4. Vous uploadez et écrasez tous les fichiers sur le serveur.

Si vous avez des milliers d’images à optimiser, cela peut être très long (plusieurs heures, voir plusieurs jours avec les mauvaises options), mais je trouve que ça vaut largement le coup. Par exemple, vous pouvez passer gratuitement d’un poids de 600 mo à 480 mo pour la totalité de vos images.

Je vous propose de télécharger l’ensemble de ces outils et de les mettre dans un dossier spécifique. Les fichiers .bat sont vaguement analysés dans la suite de cet article, mais il faut absolument que vous les ouvriez avec un programme de texte et que vous modifiez les chemins :

  • du dossier où vous allez télécharger puis optimiser les images de vos sites, chez moi il s’appelle temp (juste après l’instruction cd) ;
  • de l’emplacement où les programmes se trouvent (juste après l’instruction call)

Vous avez un exemple d’emplacement dans les fichiers suivants, mais ils ne seront certainement pas les mêmes chez vous !

JPG

Nous allons utiliser jpegtran pour le format JPG. Il va simplement supprimer toutes les métadonnées (spécifiques aux applications comme Photoshop et EXIF) ainsi que les commentaires inutiles.

cd "D:\Outils\Optimisation d'images\temp"
for /r . %%i in (*.jpg) do (
call "D:\Outils\Optimisation d'images\jpegtran.exe" "-progressive" "%%i" "%%i"
)

Nous utilisons ici l’option –progressive qui donne au final des poids moins élevés. Votre image va se charger progressivement dans votre navigateur, en partant d’une version de qualité inférieure qui va s’améliorer au fur et à mesure que de nouvelles informations arrivent.

PNG

Nous allons utiliser optiPNG pour le format PNG. Ce format contient ce qu’on appelle des chunks et ils ne sont de loin pas tous nécessaires pour l’affichage final d’une image.

@echo off
cd "D:\Outils\Optimisation d'images\temp"
for /r . %%i in (*.png) do (
call "D:\Outils\Optimisation d'images\optipng.exe" "-o4" "%%i"
)

Il y a une instruction en plus que dans le script d’avant : @echo off.

De base, jpegtran n’est pas un outil « bavard », il n’affiche rien pendant qu’il travaille, contrairement à optiPNG. Quand j’ai plusieurs centaines d’images à optimiser, cela peut être assez long et j’aime bien « voir » que l’outil travaille pour être sûr qu’il n’a pas planté. Comme optiPNG est bavard de base, on désactive donc l’affichage des instructions contenues dans la boucle.

Encore une précision concernant l’option –o4. En fait, les options d’optiPNG vont de –o1 à –o7, où –o7 est la plus poussée et va considérablement ralentir le script pour gagner quelques octets en plus sur certaines images. Je trouve que –o4 est un bon compromis, mais si vous avez des milliers d’images à optimiser, ne mettez pas d’option du tout, la perte de poids théorique sera très faible et vous gagnerez énormément de temps. C’est donc à adapter en fonction de vos besoins, mettez –o7 pour seulement 4 images mais mettez –o4 pour une trentaine.

Quelques petites précisions

La technique d’optimisation qu’utilise OptiPNG n’est pas idéale, j’en conviens parfaitement. C’est comme si l’on créait un fichier zip/rar par-dessus un format de fichier déjà optimisé (le PNG). Malheureusement, le web c’est beaucoup de compromis et de contraintes, dans la majorité des cas, c’est le seul travail qu’il est possible d’effectuer.

Après avoir passé vos images dans la moulinette jpegtran/optiPNG, les éventuelles informations de copyrights sont également supprimées. À vous de voir si vous devez y faire attention ou si vous y accorder de l’importance.

Les fichiers GIF peuvent également être optimisés. Je parle bien évidemment des animations car un fichier GIF statique, dans la majorité des cas, sera plus lourd que le même fichier au format PNG. Je n’ai jamais creusé l’optimisation des GIF animés car je n’en utilise jamais, mais si cela vous intéresse, GIFsicle semble intéressant. Puisque les animations consistent en une suite d’images, certaines parties de ces images se répètent d’une étape à l’autre, GIFsicle supprime donc les informations concernant ces pixels dupliqués.

J’en ai terminé pour aujourd’hui, merci encore à mon agent secret préféré, Sylvain, pour m’avoir invité dans ce guest-blogging spécial licence référencement !

Merci à toi Guillaume, ça valait le coup d'attendre ton article puisque c'est un bien beau cadeau que tu fais aux lecteurs de Noviseo ! 

Les autres articles des étudiants RRW :
Germain - webanalytics
Natalia - SEA
Armand - Rédaction web
Justin - SMO

Catégorie Licence pro Référenceur et Rédacteur Web, Référencement | Thématique , .

29 réponses à Outil web : passez vos images au régime Dukan !

  1. Littlebuzz says:

    Est-ce vraiment une bonne idée de virer les métadonnées EXIF ? Sauf si se sont tes propres photos, les photographes sont généralement très a cheval sur leurs œuvres, et par expérience, ils peuvent vraiment être pénible si on touche à quoique se soit.

  2. Rémi says:

    Merci Guillaume, très sympa de partager avec nous tes astuces pour réduire le poids des images. J’ai vu les résultats sur un de tes sites et ce tour de force est impressionnant !

  3. Pierre says:

    Bonjour Guillaume et Sylvain,
    Un article vraiment très utile, à l’heure où effectivement quelques millisecondes peuvent changer la donne pour un site, ce genre d’outil fait toute la différence.
    Par contre le temps de traitement est réellement rebutant, disons qu’il est préférable d’intégrer l’utilisation dans une routine générale plutôt que de la mettre en oeuvre sur un site au contenu très riche, sous peine de perdre un temps de production précieux.
    Vraiment que du bon pour ces articles RRW, félicitations !

  4. Guillaume says:

    J’arrive pas trop à comprendre le ref d’une image. Perso je l’ai met à l’arrache et elle se place toute seule dans Google images…

  5. Anthony says:

    Tout d’abord merci encore pour cet article qui me sera bien utile.
    Je connaissais Smushit et je l’utilisais encore jusqu’a aujourd’hui je pense. Car comme il est dit dans l’article cet outil est pratique mais compliqué à utiliser pour plusieurs image et souvent long.
    Merci donc aussi à l’auteur de nous avoir partage cette découverte.

  6. Intégrateur says:

    Merci Guillaume pour cette liste d’outils indispensables pour optimiser les fichiers images lors d’une intégration web réussie ! J’utilise également TweakPng pour les transparences, le connaissez-vous ?

    Enfin, pour ouvrir l’horizon, on pourrait évoquer les problématiques fichiers/navigateurs comme le sacro-saint problème de la gestion des PNG pour IE6. Même si Explorer6 est moribond, le bon choix de format d’image peut s’avérer primordial à la base.

  7. Lea says:

    Merci pour toutes ces petites astuces. J’ai déjà testé le premier outil dont tu as évoqué l’existence soit Smushit, mais malheureusement je trouve qu’il ne compresse que peu mes images (10/15%). Concernant les autres outils je n’ai pas pu les tester car j’évolue sous Mac, désolé, tout le monde n’est pas parfait ! lol !

  8. jb says:

    Pour le PNG, je conseille vivement TinyPng.org qui fait des merveilles (rien à voir avec Smush.it niveau gain)

  9. Guillaume says:

    Salut,
    Bon avec tout ça je vais avoir encore du boulot mais je pense que le jeu en vaut la chandelle, au moins j’aurais fait le max pour accélérer les choses niveau temps de chargement. Merci pour les tuyaux ;-)

  10. Matthieu says:

    Je ne connaissais pas jpegtran, j’ai testé et je viens de gagner quelques précieux Mo sur les quelques milliers d’images de ma boutique. J’arrive à 5% de gain (un peu moins que smush it j’ai l’impression). Ce n’est pas énorme mais c’est déjà ça.
    Merci d’avoir communiqué sur cet outil.

  11. xavier says:

    Comme beaucoup j’ai déjà eu l’occasion d’utiliser les service de SmushIt et c’est vrai que le coté Web de l’application est super pratique. Après je vais prendre le temps de tester les scripts et outils que tu proposes … j’ai certains sites avec des milliers d’image .jpg, le jeu peu en valoir la chandelle ! Merci pour ces infos :)

  12. miu says:

    C’est toujours assez galère de compresser sans perdre en qualité, merci pour ces outils qui vont bien me servir, je crois.

  13. Bruno says:

    C’est vrai que les images sont bien souvent les laissées pour compte de l’optimisation web!

    Combien, ne remplissent pas les méta-tags, publient des photos qui font fuir ou qui sont tellement lourdes qu’on … prend nos jambes à notre cou!

    Je crois qu’il est également nécessaire de na pas surcharge nos pages d’images et mieux multiplier le nombre de pages que le nombre d’images par page.

  14. patrick says:

    Merfi pour toutes ces précisions et ces différentes astuces. Pour le jpeg, pour ceux qui veulent garder les métadonnées EXIF, je trouve qu’il y un site vraiment excellent
    en réduction de poids tout en conservant la qualité, très fluide en plus et en live : jpegmini.com

  15. Marion says:

    Voilà un guide d’optimisation bien complet, de quoi gagner quelques centièmes bien précieux ! Sinon, j’adore le titre de ton article ;)

  16. Betrash says:

    Plutôt sympathique et complet ce billet, surtout qu’il a la vertu de nous faire penser à quelque chose que l’on aurait tendance à reléguer au second plan.

    Bref, je vais tester ça sur un domaine, et voir à quel point le temps de chargement des images influe sur la considération par big G du site.

  17. Seb says:

    Personnellement je suis sur Mac et j’utilise le bon vieux Photoshop pour réduire la taille de mes images en utilisant enregistrer pour le web. Je sais pas si la solution est optimale mais par habitude j’ai pas cherche mieux ! Sinon sur Mac un outil pas mal pour faire des annotations sur vos images ou les recadrer rapidement c’est Skitch, je l’utilise aussi sur iPad et il est super intuitif.

  18. C’est vrai que parfois, je ne prends pas le temps de réduire mes images. Bouuuu c’est mal. Je sais…

    En tout cas sympas ce petit article, j’avais déjà entendu parler de cet outil mais je ne l’avais jamais testé. Si on ne perd vraiment rien en qualité, je vais aller tester ça.

  19. Une compression qui m’aide beaucoup, merci vraiment pour cet article.

  20. Germain says:

    Il est trop fort ce Guillaume. Merci pour ton partage, je vais essayer tout ça pour mettre cela en pratique sur la V2 d’APP ;)

  21. Rose says:

    Essai concluant de mon côté sur un site qu’avec des photos, c’est pas énorme énorme, mais c’est tout de même très appréciable! :-)

  22. Ca a aussi marché de mon côté. Merci beaucoup.

  23. Mathilde says:

    C’est vrai que parfois les photos sont assez lourdes sur un site et ralentissent carrément la navigation. Je ne connaissais pas cet outil, je l’essaierai à l’occasion.
    En tout cas merci pour le partage ;)

  24. Seif says:

    Bonjour, Merci pour cet article, j’aime bien surtout qu’il nous donne beaucoup d’idées pratiques qui peuvent nous aider à gagner plus de temps pour réduire le poids des images. J’ai pas eu l’occasion d’utiliser les service de SmushIt avant, et je crois que c’est vraiment l’occasion pour le tester !

  25. Evenstood says:

    Je vous le dis moi, ces jeunes qui nous apprennent des trucs j’en est ma claque :D

    Super le partage, moi qui avait arrêter ma veille pendant quelques temps je suis pas content de revoir du beau et du nouveau monde plein de vie et plein d’entrain pour partager tel ou tel chose.

    Vraiment top cette combine, d’autant plus que je ne la connaissais pas du tout.

  26. Oui moi aussi cher Evenstood, je ne connaissais pas cette astuce et ca marche a merveille. Merci pour ce billet.

  27. pierre says:

    J’ai utilisé aussi smush it, mais ça rame vraiment trop, je suis d’accord.
    J’ai également trouvé jpegmini en ligne plus facile à utiliser que les scripts que tu fournis. Quelques Ko par-ci par-là de gagner c’est toujours ça.

  28. baudelot says:

    Google prenant de plus en plus en compte les EXIF il semble contre-productif de les supprimer pour un référencement localisé

  29. Gaultier says:

    Je me baladais sur le site internet et le screenshot de GtMetrix a attiré mon attention :P

    Ca reste pour moi un outil indispensable pour effectuer un référencement de qualité. Tout est expliqué pour que tout soit optimisé au mieux, nous effectuons un balayage gtmetrix sur chacun des sites dont nous avons la charge.

    Beaucoup de webmasters négligent encore aujourd’hui les performances d’un site internet, mais c’est pour moi primordial car cela permet d’être mieux vu par les moteurs de recherche ET par les visiteurs.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Veuillez utiliser votre nom ou votre pseudo. Tout commentaire ne respectant pas cette règle verra son lien supprimé.