Sur la plupart des sites, les images représentent plus de la moitié des octets. Ce sont aussi ce qu'il y a de moins technique à corriger : aucune modification de code, et l'économie est immédiate.

1. Servez la taille que la page utilise

Une photo de 4000 px affichée dans une colonne de 600 px coûte au visiteur les 4000 px entiers. C'est la plus grosse économie à elle seule, et l'erreur la plus répandue.

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 900px) 100vw, 600px"
     width="800" height="450" alt="...">

sizes dit au navigateur quelle largeur l'image AURA, afin qu'il puisse choisir avant la mise en page. Sans cela il suppose la pleine largeur et télécharge la plus grande.

2. WebP ou AVIF, pas JPEG

cwebp -q 80 photo.jpg -o photo.webp

À qualité égale, le WebP pèse d'ordinaire 25 à 35 % de moins que le JPEG et il est pris en charge partout où cela compte. L'AVIF est plus léger encore, et plus lent à encoder.

3. Chargez en différé ce qui est sous la ligne de flottaison — et PAS ce qui est au-dessus

<img src="..." loading="lazy" decoding="async">
Ne chargez jamais l'image d'en-tête en différé. C'est précisément celle que le visiteur attend, et la différer retarde le plus grand affichage — le chiffre que Google mesure.

Donnez toujours la largeur et la hauteur

Sans elles, le navigateur ignore combien de place réserver, et tout ce qui se trouve dessous saute au moment où l'image arrive. Ce saut est un décalage de mise en page, et il est mesuré.

Regardez ce qu'une page télécharge réellement : ouvrez le panneau réseau, filtrez sur les images, triez par taille. La plus grosse est en général une surprise, et en général une photo que personne n'a redimensionnée.