Comment le poids des images affecte la vitesse de votre site

Si votre site vous semble lent, les images sont le premier endroit où regarder. Sur la plupart des sites, elles représentent plus de poids total de page que toutes les autres ressources réunies — HTML, CSS et JavaScript compris. C'est aussi ce qui en fait le point le plus rentable à corriger, puisqu'une poignée d'images bien compressées peut faire gagner des secondes de chargement là où une dizaine de petits ajustements de code n'y parviendraient pas.

Où les images font vraiment mal : les Core Web Vitals

Les Core Web Vitals de Google sont les indicateurs de vitesse qui pèsent dans le classement des résultats de recherche, et les images influencent directement deux des trois :

• Largest Contentful Paint (LCP) : le temps que met le plus grand élément visible de la page à s'afficher. Sur la plupart des pages, cet élément est une image — une bannière principale, une photo produit, l'image d'en-tête d'un article de blog. Une image lourde et non optimisée est l'une des causes isolées les plus fréquentes d'un mauvais score LCP.
• Cumulative Layout Shift (CLS) : à quel point le contenu bouge pendant le chargement de la page. Ça n'a pas de rapport direct avec le poids du fichier, mais avec des images qui se chargent sans que leur taille ait été réservée à l'avance, ce qui fait sauter le reste de la page dès qu'elles apparaissent.

Si vous avez déjà passé une page dans PageSpeed Insights ou Lighthouse et vu « Largest Contentful Paint » signalé en rouge, il y a de bonnes chances qu'une image en soit la cause.

Ce qui fait vraiment la différence

Dans l'ordre approximatif d'impact :

1. Compresser avant de mettre en ligne, pas après. Une photo qui sort directement d'un téléphone ou d'un appareil photo pèse souvent entre 3 et 10 Mo. La même image, bien compressée, peut tenir en quelques centaines de Ko sans différence visible à la taille d'affichage normale. Cette seule étape représente généralement le plus gros gain.
2. Servir les images à la taille où elles s'affichent réellement. Une photo de 4000 px de large affichée dans une colonne de blog de 600 px ne fait que gaspiller de la bande passante : le navigateur télécharge quand même les 4000 px de données, juste pour les réduire visuellement. Redimensionnez près de la taille d'affichage réelle avant la mise en ligne.
3. Utiliser un format moderne. Le WebP peut aujourd'hui être utilisé partout sans risque et pèse en général 25 à 35 % de moins qu'un JPG équivalent à qualité visuelle égale ; l'AVIF peut être encore plus léger là où il est pris en charge. (Nous couvrons ces arbitrages dans WebP vs JPG vs PNG vs AVIF.)
4. Réserver de la place pour les images avant leur chargement. Définir une largeur et une hauteur explicites (ou un aspect-ratio) sur vos balises image permet au navigateur de réserver immédiatement le bon espace, au lieu de décaler la mise en page dès l'arrivée de l'image — c'est ce qui corrige réellement le CLS.
5. Charger en différé (lazy-load) tout ce qui se trouve sous la ligne de flottaison. Les images que le visiteur n'a pas encore fait défiler jusqu'à voir n'ont pas besoin de se charger immédiatement, et la plupart des navigateurs modernes prennent ça en charge avec un simple attribut HTML (loading="lazy"), sans outil supplémentaire.

Les étapes 1 à 3 concernent le poids du fichier. Les étapes 4 et 5 concernent la façon dont le navigateur gère ce poids pendant le chargement. Les deux comptent, mais si vous ne pouvez faire qu'une seule chose aujourd'hui, c'est bien compresser vos images : c'est le meilleur rapport effort/impact des cinq.

Comment savoir où vous en êtes réellement

Avant de deviner, mesurez. PageSpeed Insights (l'outil de Google, construit sur Lighthouse) affiche vos vrais scores LCP et CLS pour n'importe quelle URL publique, et signale précisément quelles images posent le plus problème. C'est gratuit, ça prend environ 30 secondes, et ça vous dit exactement où concentrer vos efforts au lieu d'optimiser à l'aveugle.

Bien faire la partie compression

L'erreur la plus fréquente n'est pas de sauter la compression : c'est d'utiliser un outil qui envoie vos images vers le serveur de quelqu'un d'autre pour les traiter, ce qui est plus lent et signifie qu'une copie de votre contenu (peut-être encore non publié) séjourne quelque part hors de votre contrôle pendant le traitement.

Les étapes 1 et 3 de cette liste, compresser et convertir entre JPG, PNG, WebP et AVIF, se font directement dans votre navigateur avec img-compress. Il lit aussi les photos HEIC (le format par défaut de l'iPhone) sous Safari, et rien n'est envoyé où que ce soit : aussi rapide pour une seule image principale que pour tout un lot de photos produit avant le lancement d'un site. (Redimensionner aux bonnes dimensions d'affichage, l'étape 2, reste à faire dans votre éditeur d'images ou votre CMS avant d'en arriver là.)