Optimiser les images de votre site : le guide pratique

Sur la plupart des sites, les images représentent la plus grosse part du poids d'une page, souvent bien plus que le code et les polices réunis. C'est aussi le levier le plus simple : on peut alléger nettement un site sans toucher à une ligne de logique, simplement en servant de meilleures images.

Choisir le bon format#

Le JPEG et le PNG ont longtemps été les seuls choix possibles. Ce n'est plus le cas.

• WebP est reconnu par tous les navigateurs actuels. À qualité visuelle comparable, il est généralement nettement plus léger que le JPEG.
• AVIF compresse encore mieux, surtout pour les photos, mais l'encodage est plus lent. Tous les navigateurs récents le prennent en charge.
• SVG reste imbattable pour les logos, les icônes et les illustrations simples : il est léger et parfaitement net à toutes les tailles.

L'élément picture permet de proposer plusieurs formats et laisse le navigateur choisir le meilleur qu'il connaît :

<picture>
  <source srcset="/terrasse.avif" type="image/avif">
  <source srcset="/terrasse.webp" type="image/webp">
  <img src="/terrasse.jpg" alt="Terrasse du restaurant au coucher du soleil" width="1200" height="800">
</picture>

Servir la bonne taille#

Envoyer une image de 3 000 pixels de large pour l'afficher dans une vignette de 400 pixels est l'erreur la plus courante. Le téléphone télécharge tout, puis réduit l'image lui-même.

Les attributs srcset et sizes décrivent les versions disponibles et la place que l'image occupera à l'écran. Le navigateur fait le reste :

<img
  src="/produit-800.webp"
  srcset="/produit-400.webp 400w, /produit-800.webp 800w, /produit-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 400px"
  alt="Sac à dos en toile verte, vue de face"
  width="800" height="800">

Toujours indiquer les dimensions#

Sans width et height, le navigateur ne sait pas quelle place réserver avant le chargement. Le texte s'affiche, puis saute quand l'image arrive. C'est l'une des premières causes d'un mauvais score CLS. Les dimensions indiquées servent à calculer les proportions : l'image peut ensuite rester fluide en CSS.

Charger au bon moment#

L'attribut loading="lazy" demande au navigateur d'attendre que l'image approche de la zone visible pour la télécharger. Sur une page longue, le gain est énorme.

Mais il y a une exception importante : l'image principale, en haut de page. Celle-là doit au contraire arriver le plus vite possible, avec fetchpriority="high" et sans chargement différé. C'est souvent elle qui détermine votre LCP.

Compresser sans abîmer#

Une qualité de compression autour de 75 à 80 suffit pour la plupart des photos : l'œil ne voit pas la différence, le poids si. Pensez aussi à supprimer les métadonnées (appareil, coordonnées GPS), inutiles sur le web et parfois indiscrètes.

Vérifier le résultat#

Dans l'onglet Réseau des outils de développement, filtrez sur les images et triez par taille. Les plus lourdes apparaissent tout de suite. Codanalyst fait ce travail sur l'ensemble de vos pages et indique, pour chaque image, le format et la taille recommandés. Découvrez ce que pèsent vraiment vos pages.