Optimisez le poids de vos images pour des sites super rapides 🏎️

Depuis quelques années maintenant, entre nos équipes design et technique, nous avons mis en place un process bien huilé qui nous permet de travailler avec des images les plus légères possibles dans tous les sites et applications que nous créons. Tous n’est pas toujours parfait, mais nous y travaillons. L’idée de cet article/tuto est de vous expliquer étape par étape comment nous fonctionnons pour que vous puissiez vous aussi adopter ces bonnes pratiques.

En rentrant progressivement tout cela dans vos habitudes, vous participez à faire de la toile un meilleur endroit. Mais surtout, vous faites plaisir à tous les designers de l’internet comme moi qui pleurent des larmes de sang à chaque fois qu’ils découvrent des logos de sociétés du CAC40 en JPEG (avec respect bien entendu 🙄).

Pourquoi on s'inflige ça ? 🥲

Pour être très transparent, cela prend forcément un peu plus de temps que d’exporter directement une image et de la mettre sur son site sans s’embêter. Mais, le temps que vous gagnez ici, c’est autant de conversions perdues sur votre site à cause de temps de chargement trop long.

Certains experts vous dirons qu’il suffit de passer par un CDN (Content Delivery Network) qui va automatiquement fournir le format d’image adapté, dans la bonne extension en fonction du navigateur et de l’appareil qui va afficher l’image, mais nous ne sommes pas tous experts et ce tutoriel s’adresse aux débutants. Et même si vous ne l’êtes pas, c’est toujours une bonne chose de comprendre comme cela fonctionne. D’autre part, certains CMS (Content Management System) tels que Shopify formatent eux-mêmes les images pour les délivrer au bon format et au bon poids. Mais pour les solutions un peu plus artisanales, à vous de mettre les mains dans le cambouis.

Revenons à nos moutons, les raisons principales de réduire le poids de ses images sont les suivantes :

• Des performances optimales : tous vos utilisateurs n’ont pas nécessairement la fibre lorsqu’ils consultent votre site, une bonne partie d’entre eux sera sur son mobile et il n’est pas dit qu’à l’instant T ils soient en 4G. On met toutes les chances de notre côté en diminuant les temps de chargement, et par extension on augmente donc ses chances de conversion (bien entendu, on part du principe que votre site est responsive : adapté à tous les appareils).
• C’est moins mauvais pour la planète. Tout simplement parce qu’une image, c’est un fichier qui a un poids et qui prend de la place sur un serveur (un ordinateur) qui se trouve physiquement dans plusieurs data-centers dans le monde. À chaque fois qu’un utilisateur charge votre site, le serveur se « réveille » et tous les maillons de la chaîne consomment de l’énergie pour vous délivrer cette image dans les meilleurs délais. Plus elle est lourde, plus elle consomme en énergie. À l’échelle d’une seule image, c’est négligeable, mais si on additionne tous les sites existants, cela commence à faire beaucoup. L’industrie du web est une industrie polluante, alors si nous pouvons faire quelque chose pour diminuer cet impact et par la même occasion améliorer les performances de nos sites, pourquoi s’en priver ?

Les formats d’image 🖼️

Avant tout, il est important de savoir à quel type d’image on a à faire. Sans rentrer dans les détails, il existe 2 formats :

• Vectoriel : c’est du code, on utilise des maths pour aligner des points sur une grille. L’avantage, c’est qu’il n’y a pas de perte de qualité lorsque l’on agrandit un fichier vectoriel. Le format le plus connu est le SVG. Les outils comme Adobe Illustrator ou encore Figma sont adaptés pour le vectoriel. J’essaie de travailler au maximum en SVG. J’aime le SVG et le SVG vous aime aussi, c’est votre ami. Comme c’est du code, il peut la plupart du temps être modifié dynamiquement et même animé. C’est le top.
• Pixelisé : on utilisera les images pixelisées (avec des pixels) pour les photos ou les illustrations avec des détails. Les formats les plus connus sont JPEG, PNG et GIF. Ce format est idéal pour la retouche sur Photoshop par exemple. L’avantage du pixelisé est qu‘il est globalement compatible avec tous les navigateurs. Par contre, une image pixelisée est plus lourde qu’un vecteur.

Ceux qui suivent pourront avoir la réflexion suivante : mais du coup, pourquoi on ne travaille pas qu’en SVG ? C’est une très bonne question. Le niveau de détail de certains fichiers pixelisés (comme une photo) ne permettent tout simplement pas de les convertir en SVG. Ou bien, cela n’aurait pas de sens car on perdrait énormément de détails et la photo serait pixelisée (ce qui est le contraire de ce que l’on souhaite avec du SVG). Donc pour certaine image, on diminue leur poids sans perte de qualité. Nous y reviendrons.

L’export ↗️

Maintenant que nous savons reconnaître le format en notre possession, voyons la conduite à adopter selon les différents cas de figures :

1. J’ai un format vectoriel (SVG) Très bien, le graphiste ou illustrateur avec qui vous avez travaillé (ou vous) a fait les choses comme il faut. Vous n’avez plus qu’à transmettre le fichier à votre développeur pour intégration ou bien le faire vous-même. Nous pourrions encore réduire le fichier, mais à ce niveau là je trouve que c’est chipoter pour pas grand chose.
2. J’ai une image avec des pixels (PNG, JPEG, GIF…)
   1. Je ne peux pas la vectoriser pour les raisons vues ci-dessus (ça n’a pas de sens), je vais donc réduire sa taille sans perte de qualité :
      1. Avec un outil d’édition (Photoshop, Gimp ou autre), je vais exporter l’image à la taille et au ratio désirés, en PNG de préférence (le PNG prend en compte la transparence, pas le JPEG). Dans l’idéal, il faudrait plusieurs tailles (ordinateurs de bureaux, tablettes, mobiles etc.), mais ici, nous allons faire simple.
      2. Je me rends sur https://squoosh.app/index.html (il en existe d’autres, il existe aussi des plugins Figma, mais nous avons dit que nous faisions simple).
      3. Je glisse mon image pixelisée
      4. En bas à droite, j’ai désormais un menu qui va me permettre de réduire le poids de l’image. Si ça n’est pas déjà fait, je vais jouer avec la partie « Edit » et le « resize » qui va redimensionner l’image et « Reduce palette » qui va diminuer le nombre de couleurs présentent à l’image. À titre personnel, j’utilise rarement ce dernier qui diminue trop la qualité pour un perte de poids négligeable.
      5. Ce qui nous intéresse, c’est surtout la partie « Compress ». En dessous, dans une liste, on va choisir le format WebP. C’est un des formats d’image les plus légers mais surtout compatible avec une majorité des navigateurs internet.
      6. Lorsque l’on a choisit WebP, on ajuste l’effort et la qualité. Vous pourrez voir en dessous le poids de l’image changer en direct en fonction de vos changements. L’idée est d’arriver à un rapport qualité/poids idéal, à vous de tester.
      7. Lorsque c’est ok, il ne vous reste plus qu’à télécharger l’image et à l’intégrer dans votre site, ça n’était pas si compliqué ?
      8. PS : on pourrait aller un peu plus loin en supprimant les métadonnées des images (localisation, appareil utilisé etc.), à vous de voir si c’est pertinent (notamment pour des questions de confidentialité).

Si je veux vectoriser une image en pixels ? 🤘

C’est tout à votre honneur. Si vous estimez qu’une image peut être vectorisée (parce que vous n’avez pas la source par exemple), il existe plusieurs solutions :

1. La première consiste à « retracer » par dessus via un outil de vecteur. Par exemple, on va importer l’image dans Figma ou Illustrator, et grâce aux outils intégrés, on va repasser par dessus (comme un calque) pour recréer la forme. Cela peut prendre un peu de temps et suppose que vous sachiez utiliser les outils, mais aussi que l’image de base n’est pas trop compliquée à recréer, car vous risqueriez d’y passer beaucoup de temps
2. La deuxième, très récente, consiste à utiliser l’IA. Attention, c’est assez magique. J’ai beaucoup creusé le sujet car la majorité des IA récentes ne génèrent pas des vecteurs mais des pixels. Et j’ai trouvé la perle rare : https://www.recraft.ai/ (et en plus c’est gratuit). Il vous suffit de créer un compte, d’ouvrir un nouveau plan de travail et de glisser votre image. Ensuite, on sélectionne l’image et on vient cliquer sur l’icône « Vectorize » dans le menu du haut (cf capture d’écran ci-dessous). Il ne vous reste plus qu’à patienter quelques secondes que la magie opère. Lorsque c’est ok, on exporte l’image en SVG et c’est bon ! Après libre à vous de la retoucher dans un outil de vecteur (Figma, Illustrator…). C’est tout récent, et pour l’instant je l’ai peu utilisé pour des formes complexes, à tester !

Le mot de la fin 🏁

Si vous êtes arrivé jusqu’ici bravo ! Maintenant vous :

• Savez discerner une image en pixels d’une image vectorielle
• Savez exporter un logo ou une illustration en SVG
• Savez réduire le poids d’une image et l’exporter en WebP grâce à squoosh.app
• Savez convertir une image en pixels (pas trop détaillée) en SVG grâce à recraft.io

Au charrette.club, cela fait quelques années que nous travaillons de cette manière. Cela nous permet de garantir des sites et applications rapides et performants (combiné à d’autres bonnes pratiques que nous verrons dans des prochains articles).

Ces outils vous ouvrent plein de nouvelles possibilités : vous avez une tablette et un stylet ? Pourquoi ne pas créer vos propres illustrations sur ProCreate (gratuit) et les vectoriser grâce à recraft.io ? Pourquoi ne pas faire une grosse repasse de votre site et optimiser les images ? C’est sans limite, à vous de jouer !

Et si vous avez la moindre question, l’équipe du charrette.club vous répondra avec plaisir !

Écouté pendant l’écriture 🎶 :