Comment faire charger plus vite les images de votre site (sans flou)

Pourquoi le poids des images compte

Ce qu'il y a de plus lent sur une page est généralement sa plus grande image, et c'est souvent ce que le navigateur mesure comme Largest Contentful Paint (LCP). Les Core Web Vitals de Google considèrent qu'un LCP inférieur à 2,5 secondes est bon. Une photo d'en-tête de 3 Mo sur une connexion mobile peut à elle seule épuiser tout ce budget.

1. Servez les images à la taille où elles sont affichées

Inutile d'envoyer une photo de 4000 pixels dans un emplacement qui l'affiche sur 800 pixels de large. En règle générale, une image ne devrait faire qu'environ deux fois sa largeur d'affichage, ce qui la garde nette sur les écrans haute densité. Largeurs typiques : 1600–2000 px pour une image d'en-tête pleine largeur, 800–1200 px pour les images d'article, 300–400 px pour les miniatures.

2. Utilisez un format moderne

Les fichiers WebP sont généralement 25 à 35 % plus légers que le JPG à qualité similaire, et tous les navigateurs actuels les prennent en charge. N'utilisez le PNG que là où il faut des graphismes sans perte ou de la transparence. Si vous devez prendre en charge des logiciels plus anciens, gardez un JPG de repli. Voir JPG vs PNG vs WebP pour les détails.

3. Compressez à un poids raisonnable

Ce sont des objectifs approximatifs, pas des règles : une image d'en-tête sous environ 200 Ko, les images d'article sous environ 100 Ko et les miniatures sous environ 30 Ko. Fixez la cible et laissez l'outil trouver la qualité la plus haute qui la respecte, plutôt que de tâtonner avec un curseur.

4. Chargez en différé les images situées sous la ligne de flottaison

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Le chargement différé (lazy loading) repousse les images jusqu'à ce que le visiteur défile près d'elles. Ne l'appliquez pas à l'image principale en haut de la page — celle-ci doit se charger immédiatement, car c'est généralement l'élément LCP.

5. Définissez toujours la largeur et la hauteur

Avec les dimensions dans le HTML, le navigateur réserve la bonne quantité d'espace avant l'arrivée de l'image : la page ne saute donc pas pendant le chargement (ce saut se mesure en Cumulative Layout Shift). Un attribut alt descriptif aide l'accessibilité et la recherche d'images.

6. Proposez plusieurs tailles avec srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Le navigateur choisit le plus petit fichier assez net pour l'écran du visiteur : un téléphone ne télécharge donc pas la version pour ordinateur.

Comment vérifier votre travail

Passez la page dans PageSpeed Insights ou dans Lighthouse, dans les outils de développement de Chrome. Tous deux signalent les images surdimensionnées et non optimisées et estiment les octets exacts que vous économiseriez.

Préparer les fichiers

1. Convertissez l'image en WebP.
2. Réglez la largeur voulue dans l'outil de redimensionnement — ratio verrouillé.
3. Fixez un poids maximal, puis vérifiez le résultat avec le curseur avant/après.
4. Exportez un fichier par largeur que vous prévoyez d'utiliser dans srcset.

Travaillez depuis l'original pour chaque export. Compresser une copie déjà compressée fait perdre plus de qualité que compresser la source une seule fois.

Questions fréquentes