Images et vitesse d’un site web : optimiser sans tout casser
Sur la plupart des sites, les images représentent l’essentiel des octets téléchargés. Les optimiser est le geste le plus rentable pour accélérer tes pages.
Pourquoi les images pèsent lourd dans une page
Une page web se compose de texte, de code, de polices et d’images. Le texte et le code sont très légers : quelques dizaines de kilo-octets suffisent souvent. Une seule photo non optimisée pèse plus que tout le reste réuni. Comme nous l’avons mesuré sur une photo de 3000 pixels de large, un JPEG de qualité 85 fait déjà environ 1,2 Mo, soit davantage que la plupart des pages entières.
Le problème est amplifié par un réflexe courant : déposer sur le site la photo telle qu’elle sort de l’appareil. Le visiteur télécharge alors des millions de pixels que son écran n’affichera jamais. Sur un téléphone en connexion mobile, cela se traduit par une page qui met du temps à apparaître, et par des visiteurs qui repartent.
Les indicateurs qui comptent
Google mesure l’expérience de chargement avec trois indicateurs, les Core Web Vitals. Ses recommandations publiques fixent les seuils d’un « bon » résultat, évalué sur 75 % des visites :
| Indicateur | Ce qu’il mesure | Seuil « bon » |
|---|---|---|
| LCP (Largest Contentful Paint) | le temps d’affichage du plus grand élément visible | 2,5 secondes ou moins |
| INP (Interaction to Next Paint) | la réactivité aux clics et aux touches | 200 millisecondes ou moins |
| CLS (Cumulative Layout Shift) | la stabilité visuelle, les sauts de mise en page | 0,1 ou moins |
Les images influencent directement deux d’entre eux : le LCP, car le plus grand élément d’une page est très souvent une image, et le CLS, car une image qui apparaît sans place réservée pousse le texte vers le bas. Optimiser tes images, c’est donc améliorer des indicateurs que les moteurs de recherche regardent.
Bien dimensionner : le levier numéro un
La première règle est de ne pas servir une image plus grande que son emplacement. Nous l’avons mesuré sur notre photo de test, en JPEG qualité 85 :
| Largeur | Poids |
|---|---|
| 3000 px | 1 187 Ko |
| 1500 px | 289 Ko |
| 800 px | 91 Ko |
Réduire la largeur de 3000 à 800 pixels divise le poids par plus de treize. C’est un gain bien supérieur à ce qu’aucun réglage de qualité ne peut offrir. Avec l’outil Redimensionner, tu peux fixer une taille maximale pour tout un lot d’images en une seule fois, sans jamais agrandir celles qui sont déjà petites.
Pour les écrans haute densité, comme la plupart des téléphones récents, prévois une image deux fois plus large que son emplacement : un encart de 400 pixels affichera une image de 800 pixels nette. Notre guide sur les pixels et la résolution explique pourquoi.
Servir plusieurs tailles avec srcset et sizes
Un même fichier ne convient pas à un téléphone et à un grand écran. Les attributs srcset et sizes permettent de proposer plusieurs versions, le navigateur choisissant la plus adaptée :
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="800" height="533" alt="Description de la photo">
Ici, srcset liste les versions disponibles avec leur largeur en pixels, et sizes indique la place que l’image occupe : toute la largeur de l’écran sur un petit téléphone, 800 pixels au-delà. Le navigateur calcule alors quel fichier télécharger. Il faut, bien sûr, préparer chaque version à l’avance, ce que permet de faire l’outil Redimensionner en mode pourcentage ou taille maximale.
Formats modernes et format de secours
Le format compte autant que les dimensions. Sur notre photo, un WebP de qualité 80 pèse 554 Ko contre 1,2 Mo pour le JPEG, et un AVIF de qualité 60 pèse 477 Ko. Nous détaillons ces formats dans nos guides sur l’AVIF et sur le WebP.
La balise picture permet de proposer plusieurs formats, le navigateur retenant le premier qu’il sait lire :
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="1200" height="800" alt="Description de la photo">
</picture>
Chargement différé, priorité et dimensions déclarées
Trois attributs simples évitent des problèmes courants.
loading="lazy"demande au navigateur de ne charger l’image que lorsque le visiteur s’en approche. C’est idéal pour les images situées plus bas dans la page.fetchpriority="high"signale au contraire l’image la plus importante, celle du haut de page, pour qu’elle soit téléchargée en priorité. Ne mets jamaisloading="lazy"sur cette image : elle doit apparaître le plus vite possible.widthetheightdéclarent les dimensions de l’image dans le code. Le navigateur réserve alors la place avant que le fichier arrive, ce qui évite que la page saute et protège ton score de stabilité visuelle.
Cache et erreurs fréquentes
Une image bien optimisée n’a besoin d’être téléchargée qu’une fois. Configure ton serveur pour que les images soient conservées longtemps par le navigateur, et change leur nom quand tu les modifies, par exemple en ajoutant un numéro de version. Le visiteur qui revient ne retélécharge alors rien.
Quelques erreurs reviennent sans cesse :
- Déposer l’original du téléphone dans l’outil de gestion du site, en comptant sur lui pour redimensionner. Certains le font, beaucoup non : vérifie le poids réel des fichiers publiés.
- Charger toutes les images d’un carrousel dès l’ouverture, alors que seule la première est visible.
- Utiliser un GIF animé en page d’accueil, bien plus lourd qu’une courte vidéo.
- Oublier le texte alternatif. L’attribut
altdécrit l’image pour les lecteurs d’écran et s’affiche si l’image ne charge pas ; laisse-le vide seulement pour une image purement décorative.
Un budget de poids raisonnable, et comment vérifier
Il n’existe pas de chiffre universel, mais une habitude utile consiste à se fixer un budget : par exemple, viser des images de quelques dizaines à quelques centaines de kilo-octets pour la plupart des emplacements, et une seule image un peu plus lourde en haut de page. Ajuste ce budget à ton public et à ton contenu.
Pour vérifier, ouvre les outils de développement de ton navigateur, va dans l’onglet Réseau et filtre sur les images. Trie ensuite par taille : les fichiers les plus lourds apparaissent en tête, avec leurs dimensions réelles. Compare-les à la taille d’affichage : tout écart important est une occasion d’économiser.
Les outils pour y arriver
Voici un enchaînement simple pour préparer les images d’un site, résumé par le schéma ci-dessous :
- Redimensionne tes photos à la taille d’affichage voulue avec Redimensionner.
- Allège-les avec Compresser, en JPEG ou en WebP, autour de la qualité 80. Notre méthode pour réduire le poids d’une image détaille chaque étape.
- Ajoute les attributs de dimensions et de chargement dans ton code.
- Mesure le résultat dans l’onglet Réseau.
Ces deux outils travaillent directement dans ton navigateur : les fichiers locaux ne sont pas envoyés au serveur.
Questions fréquentes
Quelle taille d’image faut-il pour un site web ?
Celle de l’emplacement où elle s’affiche, multipliée par deux pour les écrans haute densité. Une image affichée sur 800 pixels de large est bien servie par un fichier de 1600 pixels au maximum, jamais par une photo de 4000 pixels.
Faut-il mettre loading lazy sur toutes les images ?
Non. Le chargement différé convient aux images situées sous la première partie visible de la page. L’image principale du haut de page doit au contraire se charger tout de suite, sinon la mesure de chargement se dégrade.
Qu’est-ce que le LCP ?
Le Largest Contentful Paint mesure le temps nécessaire pour afficher le plus grand élément visible de la page, souvent une image. Google considère qu’un bon résultat est de 2,5 secondes ou moins, mesuré auprès de 75 % des visites.
Comment savoir quelles images alourdissent ma page ?
Ouvre les outils de développement du navigateur, onglet Réseau, filtre sur les images et trie par taille. Tu vois immédiatement les fichiers les plus lourds, leurs dimensions réelles et le moment où ils sont chargés.
