Avec Léa RIVERAIN, chargée de communication auprès de l’association La Traverse, on a fait un pari un peu fou : améliorer la performance environnementale du site web de l’asso en 20 minutes par mois.
Frustrées par un site existant très lourd et limitées par nos petits moyens (temps de développement disponible de 20 min par mois), nous avons décidé de tester une politique des petits pas sur l’éco-conception numérique.
Après tout, un pas par mois, c’est toujours mieux que 0 !
Et pour que d’autres puissent aussi améliorer leur site web malgré leurs petits moyens, je partage les détails de l’aventure dans cette série d’articles.
Dans le premier épisode, nous avons mieux compris ce qu’est la performance environnementale et comment la mesurer. Maintenant, attaquons-nous au poids des images.
Quels sont les facteurs qui influencent le poids d’une image ?
Pour optimiser une image (diminuer son poids), nous pouvons jouer sur plusieurs éléments :
- Ne pas l’ajouter (si si, c’est possible)
- Le format
- La qualité et/ou la complexité
- La taille et le rendu
- La télécharger au moment opportun
Questionner l’utilité de l’image
Une image peut peser lourd dans le poids d’un site. Pourtant, la plupart des images ajoutées à un site web apportent peu d’information. Elles sont souvent purement illustratives. Pire encore, sur certains sites vitrines, les images ne viennent même pas de l’entreprise, mais de banques d’images.
Cette fausse photo de salariés en réunion dans une salle aseptisée, qu’apporte-t-elle vraiment s’il ne s’agit ni des locaux de l’entreprise, ni de son équipe ?
Alors oui, on peut choisir de ne pas ajouter de photos inutiles. On peut aussi les remplacer par des illustrations plus légères et jouer sur d’autres éléments de la charte graphique pour ajouter de la couleur. Cela demande un peu plus d’imagination, mais c’est tout à fait possible. Et votre site n’en sera que plus léger !
Le format
Vous pouvez identifier le format d’une image en regardant le suffixe sur le nom du fichier. Par exemple, si l’image est enregistrée en tant que photo-de-chat.jpg, l’image est au format jpg. Sur le web, plusieurs formats sont utilisés. Les principaux sont : webp, png, jpg, svg, avif. Selon le contenu de l’image, certains formats pèseront moins lourd que d’autres.
Une photo originale est généralement au format jpg.
Les formats png (format matriciel) et svg (format vectoriel) seront plus souvent utilisés pour un logo ou un schéma, par exemple.
Les formats avif et webp sont réputés plus légers que jpg et png.
Le Référentiel Général d'Écoconception de Service Numérique (RGESN) fait les recommandations suivantes:- Utiliser le format vectoriel (svg) lorsque cela est possible : logos, icones, graphes (Attention, cela sous-entend que vous avez déjà un fichier au format svg ou que vous savez en faire un optimisé. On oublie les convertisseurs en ligne ou alors on compare bien les poids et la qualité à la sortie !)
- Utiliser webp (ou JPEG XL) pour les formats matriciels de type illustration simples (initialement au format png) : logos, schémas, icones…
- Utiliser webp, avif ou JPEG XL pour les formats matriciels de type photos ou illustrations complexes (initialement au format jpg)
Idéalement, il faut comparer : je convertis ma photo au format webp et avif et je regarde quel est le meilleur rapport qualité / poids que je peux obtenir. Dans la pratique, le format webp est beaucoup plus répandu et, si on ne peut en utiliser qu’un, on utilisera celui-là (sauf pour le svg qui reste en svg).
Dans certains cas, quand on code soi-même le site ou en utilisant certaines extensions, on peut proposer au navigateur plusieurs formats et c’est le navigateur qui choisit lequel il est capable de lire. C’est d’ailleurs la meilleure pratique ! Ce n’est pas le cas du site de La Traverse qui est sur Wordpress donc nous ne traiterons pas ce point.
La qualité et/ou la complexité
Dans certains formats, il est possible de compresser l’image : on diminue discrètement la qualité pour diminuer le poids.
Pour les photos et les illustrations complexes, lorsque j’enregistre mon fichier jpg ou que je le convertis en webp, je peux choisir un taux de compression. Pour les fichiers jpg, on parle de compression avec perte car on va jouer sur le niveau de qualité de l’image. Ici encore, il faut tester : mon image a-t-elle toujours le même rendu si je la compresse à 90% ? La réponse est souvent oui et j’aurai perdu quelques ko.
Pour les fichiers png, la compression va plutôt jouer sur la palette de couleurs et on parlera de compression sans perte.
Sur le site de La Traverse, les images sont déjà presque toutes au format webp avec une qualité minimum. Nous nous contenterons donc de convertir au format webp les images png et jpg s’il en reste. Nous ne ferons pas de comparaison de taille entre les différents formats car ce serait un chantier bien trop long pour le temps dont nous disposons.
La taille et le rendu
C’est la piste d’amélioration par excellence : inutile de télécharger plus que ce que l’utilisatrice verra !
Si un logo est affiché à l’écran sur une largeur de 80px, le fichier de 500px de large est bien trop lourd pour nos besoins.
Si on n’affiche qu’une partie d’une photo, envoyons déjà la photo coupée au navigateur. Par exemple, sur le site de La Traverse, les photos en forme de médaillons sont déjà envoyées au navigateur dans ce format.
Si on ajoute un voile plus sombre sur la photo, ajoutons le sur la photo originale.
Ces éléments permettent à la fois de diminer le poids des photos envoyées, mais aussi de limiter le travail du navigateur, exigeant ainsi moins de puissance de calcul.
Pour le site de notre association, c’est sur cette piste que nous allons nous concentrer.
Télécharger l’image au bon moment.
Lorsqu’on navigue sur le web, on déroule rarement toutes les pages jusqu’en bas.
Si je cherche une information précise, je ne vais peut-être même pas descendre dans la page d’accueil mais plutôt cliquer directement sur une autre page du menu. Donc, de nombreuses images ne seront jamais affichées car elles sont situées sous la limite basse de mon écran (on appelle cela la ligne de flottaison) et je ne descendrai jamais jusqu’à elle.
Alors autant demander à mon navigateur de ne pas les télécharger. C’est ce qu’on appelle le lazy-loading : le site informe le navigateur d’attendre qu’une image soit proche de la ligne de flottaison (donc sur le point d’être à l’écran) pour la télécharger.
Comment optimiser la taille d’une image ?
Identifions les images les plus lourdes
Pour nous concentrer sur l’essentiel, nous allons travailler uniquement sur les images les plus lourdes de la page d’accueil. Grâce à l’onglet Réseau des outils de développement de notre navigateur.
Pour un rappel sur l’utilisation des outils de développement, vous pouvez lire le paragraphe à ce sujet dans l’article précédent.
Sur l’onglet Réseau, je filtre sur Images en cliquant sur cet onglet et je trie par taille en cliquant sur le titre de la colonne Taille.
Je vois que le poids total des images représente 2,84 Mo et que 5 images pèsent plus de 100ko.
Toutes les images situées plus bas dans la page sont chargées uniquement lorsqu’elles sont sur le point d’être à l’écran (on les voit apparaître au fur et à mesure dans la liste des requêtes de l’onglet Réseau).
Nous ne nous occuperons pas des images servant de vignettes aux vidéos YouTube car les vidéos feront l’objet d’un autre épisode (un pas à la fois).
Retravaillons la taille de l’image
Prenons l’exemple de la deuxième image : Capture-decran-2026-03… qui pèse pour le moment 345,06ko.
Nous allons la convertir au format webp et vérifier qu’elle est à la bonne taille.
Pour trouver de quelle image il s’agit, je peux utiliser l’onglet Inspecteur des outils de développement. Je colle le nom de l’image dans la barre de recherche et une fois la bonne image trouvée dans le code, je clique droit sur l’élément et sélectionne Faire défiler la vue jusqu’au nœud. Cela me positionne directement au niveau de l’image dans la page.
Si j’ai peu d’images (ou que je connais ma page par coeur), je peux aussi me contenter de survoler le nom de l’image dans l’onglet Inspecteur pour avoir un aperçu de l’image.
Trouvé ! Il s’agit de la capture d’écran de la visite 3D de l’Atelier Partagé. Cette image est tout en bas de la page d’accueil.
Sur ordinateur, l’image s’affiche avec une taille de 700 x 311 pixels.
Sur mobile, l’image est affichée avec une taille de 360 x 160 pixels.
Ok, mais quelle est la taille optimale pour cette image ? Ici, il est nécessaire de comprendre combien de pixels affiche vraiment le navigateur. Selon la définition de l’écran, le ratio de pixels (DPR) peut être différent. Il s’agit du ratio entre le nombre de pixels physiques et le nombre de pixels utilisés par le navigateur.
Sur mon ordinateur, si le DPR est de 1, mon navigateur a besoin d’une image de 700 x 311 pixels pour afficher mon image correctement.
Si le DPR est de 2, mon navigateur a besoin d’une image de 1400 x 622 pixels pour afficher mon image correctement.
Sur mobile, le DPR est souvent de 3, mon navigateur a donc besoin d’une image de 1080 x 480 pixels.
Donc, au maximum, j’ai besoin d’une image de 1400 x 622 pixels !
Passons à l’action:
- j’ouvre mon image originale sur mon logiciel d’image préféré (GIMP pour ma part)
- je modifie sa taille à 1400 x 622 pixels
- je l’exporte au format webp
- sur Wordpress, je remplace l’image existante par celle que je viens de créer
Admirons le résultat
Notre image pèse désormais 142,52 Ko au lieu de 345,06 Ko. Le régime est efficace !
Si je reproduis cela sur l’ensemble des images de la page (en commençant par les plus lourdes), je gagnerai déjà quelques grammes (enfin quelque Ko).
Attention au texte dans les images !
Sur la page d’accueil, certaines images contiennent du texte. Par exemple, les titres sous les vignettes rondes qui entourent le plan de la Traverse sont incrustés dans les images. Cette pratique est à proscrire pour trois raisons:
- c’est plus lourd pour le même résultat : le texte en code HTML sera toujours beaucoup plus léger que dans une image
- ce texte ne peut pas être lu par un lecteur d’écran (utilisé par les personnes non-voyantes) donc cela pose un problème d’accessibilité (pour plus d’information sur l’accessibilité, commencez par cet article)
- les moteurs de recherche ne lisent pas vos images, donc on se prive de l’opportunité de leur faire savoir que La Traverse a un café associatif, par exemple. C’est dommage pour le référencement.
Bref, nous avons donc retravaillé l’image sans le texte et ajouté le texte en-dessous.
Conclusion pour le site de La Traverse
Une fois les tailles des images corrigées, les images de la page d’accueil pèsent désormais 1,76 Mo. Nous avons gagné 1,08 Mo sur le poids du site !
Certes, il y a encore du travail (toutes les autres pages du site par exemple) et l’impact reste limité, mais c’est déjà un petit pas vers un numérique plus responsable.
Devinette : savez-vous ce qui est encore pire qu’une image ? …La suite au prochain numéro…