Optimiser les images d’un site : format, poids, chargement

Pour optimiser les images d’un site, il faut agir sur quatre points : choisir le bon format, livrer des fichiers à la taille réellement affichée et compressés, charger les images au bon moment (différer celles qui sont hors de l’écran, mais jamais l’image principale), puis décrire chaque image avec un texte alternatif et un nom de fichier clair. C’est l’un des gestes les plus rentables pour la vitesse d’un site. Voici la méthode, avec les règles de Google, de web.dev et de MDN.

1. Choisir le bon format

Le guide de MDN sur les formats d’image associe chaque usage à un format :

Google indexe les images aux formats BMP, GIF, JPEG, PNG, WebP, SVG et AVIF, d’après sa documentation sur les images. Pour proposer plusieurs formats à la fois, l’élément picture permet d’indiquer le format préféré puis un format de repli.

2. Livrer la bonne taille et compresser

• Ne pas livrer plus grand que nécessaire : une image affichée sur 800 pixels de large n'a pas besoin de faire 4 000 pixels.
• Compresser avec un outil en ligne gratuit ou le logiciel de retouche : on réduit fortement le poids avec une perte de qualité invisible dans la plupart des cas.
• Proposer plusieurs tailles avec srcset : Google recommande les images adaptatives, afin que chaque appareil charge la taille qui lui convient.

Un exemple chez nous : les images des articles de ce blog sont générées en 980 pixels de large, compressées en JPEG et pèsent une trentaine à une quarantaine de ko chacune. C’est un choix adapté à notre mise en page, pas une norme à copier : regardez la largeur réelle d’affichage de vos propres images.

3. Charger au bon moment

Les recommandations de web.dev sont claires sur le chargement :

• Différez les images hors écran avec l'attribut loading="lazy" : elles ne se chargent que lorsque le visiteur s'en approche.
• Ne différez jamais l'image principale : web.dev déconseille le chargement différé des images probablement visibles au chargement de la page, en particulier celle qui sert de plus grand élément affiché (LCP).
• Indiquez width et height sur chaque image : le navigateur réserve la place avant le chargement et la page ne saute pas (c'est le CLS, l'un des Core Web Vitals).
• Donnez la priorité à l'image principale avec fetchpriority="high", selon web.dev.

Pour mesurer l’effet, utilisez PageSpeed Insights.

4. Décrire chaque image

Google précise qu’il trouve les images dans l’attribut src de l’élément img et qu’il n’indexe pas les images CSS. Une image de contenu doit donc être une vraie balise img, pas un arrière-plan.

• Un texte alternatif (alt) qui décrit l'image, sans empiler des mots-clés. Il aide aussi les personnes qui utilisent un lecteur d'écran. Voyez notre article sur les balises alt.
• Un nom de fichier descriptif : chaton-noir.jpg plutôt que IMG00023.JPG, l'exemple donné par Google.
• Des images originales quand c'est possible : une vraie photo de votre travail inspire plus de confiance qu'une image de banque d'images.

Le contrôle en 10 minutes

1. Ouvrez votre page la plus visitée dans PageSpeed Insights et regardez les recommandations liées aux images.
2. Repérez les images les plus lourdes (outils de développement du navigateur, onglet « Réseau », filtre « Img »).
3. Vérifiez le format de chacune et sa taille par rapport à l'affichage.
4. Vérifiez que l'image principale n'est pas différée et que les autres le sont.
5. Contrôlez les textes alternatifs des images de contenu.

Pour une vue d’ensemble sur la vitesse, lisez aussi notre article sur le SEO mobile.

Les erreurs à éviter

• Envoyer la photo du téléphone telle quelle, sans la redimensionner.
• Différer l'image du haut de la page, ce qui retarde l'affichage de l'élément principal.
• Oublier les dimensions et laisser la page se décaler pendant le chargement.
• Un alt vide ou bourré de mots-clés.
• Mettre du texte important dans une image : il n'est pas lisible par les moteurs de recherche ni par les lecteurs d'écran.

Une demi-heure par page importante

Commencez par les cinq pages les plus visitées : format, taille, chargement et alt. C’est un travail ponctuel dont l’effet se voit dans le score de vitesse.