Guide

Optimiser les images de votre site pour qu'il charge vite

Les images représentent la moitié du poids d'un site moyen. Quatre décisions, aucun redesign, et la page perd 40 à 70 %.

Sur un site moyen, les images représentent 50 à 70 % de tout ce que le navigateur télécharge. Si votre page est lente, la faute en revient presque toujours à cela, et non au code. La bonne nouvelle, c'est que la corriger ne demande pas d'être développeur : quatre décisions bien prises règlent l'essentiel.

1. Servez la taille réellement affichée

L'erreur numéro un est de mettre en ligne la photo telle qu'elle sort de l'appareil. Une image de 4032 px de large affichée dans une colonne de 760 px télécharge cinq fois plus de données que nécessaire. Avant de mettre quoi que ce soit en ligne, regardez la largeur réelle de l'emplacement et redimensionnez à cette largeur, ou au double si vous la voulez nette sur les écrans à haute densité.

Des repères qui fonctionnent bien avec la plupart des thèmes :

• Image pleine largeur (bandeau) : 1920 px.
• Image dans un article : 1280 px.
• Carte ou liste : 800 px.
• Miniature : 400 px.
• Avatar : 200 px.

2. Utilisez le WebP

À qualité perçue égale, le WebP pèse 25 à 35 % de moins que le JPG. Tous les navigateurs en usage aujourd'hui le comprennent. Convertir les images d'un site en WebP est, de loin, l'amélioration au meilleur rapport effort/résultat : vous ne changez pas le design, vous ne touchez pas au code, et la page perd un tiers de son poids.

Si votre système de publication ne convertit pas tout seul, vous pouvez convertir par lots en WebP avant de mettre en ligne.

3. Chargement différé pour ce qui n'est pas visible

Les images situées sous le premier écran n'ont pas besoin d'être téléchargées avant que le visiteur y arrive. Il suffit d'ajouter un attribut à la balise :

<img src="photo.webp" alt="…" loading="lazy" decoding="async">

Avec une exception importante : l'image principale du premier écran ne doit PAS porter loading="lazy". C'est précisément celle que vous voulez voir arriver au plus vite, car c'est généralement celle que Google mesure comme Largest Contentful Paint. Donnez-lui plutôt fetchpriority="high".

4. Réservez la place pour que la page ne saute pas

Si une image ne déclare pas ses dimensions, le navigateur ne sait pas combien de place lui laisser et le contenu saute quand elle finit de charger. Ce saut est mesuré (Cumulative Layout Shift) et il pénalise. La solution tient en une ligne : mettez toujours width et height sur la balise, avec les valeurs réelles du fichier. Le CSS peut continuer à redimensionner l'image ; ce qui compte, c'est que le navigateur connaisse la proportion dès le premier instant.

Les trois métriques que Google regarde

Une méthode que vous pouvez répéter

1. Rassemblez dans un dossier toutes les images à mettre en ligne.
2. Redimensionnez-les par lots à la largeur du tableau ci-dessus.
3. Convertissez-les en WebP avec une qualité de 78 à 82.
4. Renommez-les avec des mots descriptifs et des tirets : chaussure-running-bleue.webp, pas IMG_4821.webp. Le nom du fichier est un vrai signal pour la recherche d'images.
5. Mettez-les en ligne et écrivez un alt qui décrit l'image pour ceux qui ne peuvent pas la voir. Ce n'est pas du bourrage de mots-clés : c'est de l'accessibilité, et cela référence par la même occasion.

Les étapes 2 et 3 se font en une seule passe dans le compresseur : vous choisissez une taille maximale, le WebP en sortie et un niveau de qualité, vous déposez vos trente images et vous téléchargez le ZIP.

Ce que l'on peut espérer

Sur des sites réels, appliquer ces quatre points allège la page de 40 à 70 %. Une page d'accueil qui pesait 4 Mo tombe à 1,2 Mo, et le temps avant l'apparition du premier contenu est divisé par deux sur les connexions mobiles. Aucun redesign n'est nécessaire : c'est du pur travail de préparation de fichiers.