Optimisation des images et Core Web Vitals : guide pratique

Google a commence a utiliser les Core Web Vitals comme facteur de classement il y a quelques annees, et soudain tout le monde s'est interesse a la vitesse des pages. Mais quand on creuse ce qui rend les pages lentes, c'est presque toujours le meme coupable : les images.

Sur une page web moyenne, les images representent environ 50% du poids total de la page. Regler le probleme des images, et vous avez resolu la moitie du puzzle de performance.

Les trois metriques qui comptent

LCP (Largest Contentful Paint) — A quelle vitesse le plus grand element visible se charge. En general, c'est une image. Google veut ca sous 2,5 secondes.

CLS (Cumulative Layout Shift) — Combien les elements bougent pendant le chargement de la page. Les images sans dimensions definies sont une cause majeure. Objectif : moins de 0,1.

INP (Interaction to Next Paint) — A quelle vitesse la page repond aux actions de l'utilisateur. Les images lourdes peuvent bloquer le thread principal et retarder les interactions. Objectif : moins de 200ms.

L'impact est reel

Voici ce qui se passe quand on optimise les images sur un site de contenu typique :

| Metrique | Avant optimisation | Apres optimisation | |----------|-------------------|--------------------| | Poids de la page | 4,2 Mo | 890 Ko | | LCP | 4,8 secondes | 1,6 secondes | | CLS | 0,25 | 0,02 | | Temps de chargement (3G) | 18 secondes | 4 secondes |

Ce n'est pas du cherry-picking. Ces chiffres viennent de vrais sites sur lesquels j'ai travaille. Les corrections ne sont pas compliquees — elles demandent juste un peu d'intention.

Etape 1 : bonne taille, bon format

Le gain le plus important est de servir les images a la bonne taille. Une image hero de 3000px affichee a 1200px envoie 6x plus de pixels que necessaire.

Redimensionnez vos images pour correspondre a leur taille d'affichage. Pour les ecrans Retina, faites du 2x — si une image s'affiche a 600px, faites-la a 1200px.

Puis choisissez le bon format :

• WebP — 25-35% plus petit que JPEG a qualite equivalente. Utilisez-le par defaut.
• AVIF — Encore plus petit que WebP, mais l'encodage est plus lent et le support navigateur rattrape son retard.
• JPEG — Fallback universel. Toujours bien pour les photos quand WebP n'est pas une option.
• PNG — Uniquement pour les images qui ont besoin de transparence et ne peuvent pas utiliser WebP.
• SVG — Pour les icones, logos et illustrations simples. Taille de fichier minuscule, mise a l'echelle infinie.

Etape 2 : compresser agressivement

La plupart des images portent plus de qualite que ce que les ecrans peuvent afficher. Vous pouvez compresser un JPEG a qualite 80 et personne ne verra la difference — mais le fichier sera 40-60% plus petit.

Un guide approximatif :

| Niveau de qualite | Cas d'utilisation | Economies typiques | |-------------------|------------------|-------------------| | 90-100 | Portfolios photo | 10-20% | | 75-85 | Images web generales | 40-60% | | 60-75 | Miniatures, arriere-plans | 60-80% |

Ne devinez pas les niveaux de qualite. Compressez, puis regardez le resultat. Si vous ne voyez pas la difference, la compression est bonne.

Etape 3 : corriger le layout shift

Chaque image sur votre page devrait avoir des attributs width et height explicites, ou utiliser CSS aspect-ratio. Sans cela, le navigateur ne sait pas combien d'espace reserver, et le contenu saute quand les images se chargent.

<!-- Bien : le navigateur connait l'espace necessaire -->
<img src="photo.webp" width="800" height="600" alt="Description" />

<!-- Bien aussi : CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="Description" />

Ca seul peut faire passer votre CLS de l'echec a la reussite.

Etape 4 : charger en differe les images hors ecran

Si une image n'est pas visible quand la page se charge initialement, ne la chargez que quand l'utilisateur scrolle jusqu'a elle.

<img src="photo.webp" loading="lazy" alt="Description" />

Un attribut. C'est tout. Mais ne chargez pas votre image hero ou element LCP en differe — ca doit se charger immediatement.

Etape 5 : utiliser les images responsives

Servez differentes tailles pour differentes largeurs d'ecran. Un telephone n'a pas besoin d'une image de 1400px.

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.webp"
  alt="Description"
/>

Oui, ca veut dire generer plusieurs tailles. Mais les economies de bande passante sur mobile sont significatives.

SVG : l'optimisation souvent negligee

Si vous avez des icones ou logos en PNG, convertissez-les en SVG. Une icone PNG de 50 Ko devient un SVG de 3 Ko qui a l'air parfait a n'importe quelle taille.

Meme les SVG existants peuvent generalement etre optimises. La plupart des outils de design exportent des SVG avec des metadonnees supplementaires, une precision inutile et des calques caches. Les passer dans un optimiseur reduit typiquement la taille de 30-60%.

Optimisez vos SVG pour gagner ces derniers octets.

Checklist d'audit rapide

Parcourez ceci pour chaque page que vous voulez optimiser :

1. Mesurez d'abord — Utilisez Lighthouse ou PageSpeed Insights pour vos scores actuels
2. Verifiez les tailles d'images — Des images plus larges que leur taille d'affichage ?
3. Verifiez les formats — Utilisez-vous WebP ou c'est possible ?
4. Verifiez la compression — Passez les images dans un compresseur
5. Verifiez les dimensions — Chaque <img> a-t-il width et height ?
6. Verifiez le lazy loading — Les images hors ecran sont-elles chargees en differe ?
7. Mesurez encore — Comparez vos nouveaux scores

---

L'optimisation des images n'est pas un travail glamour, mais c'est l'amelioration de performance la plus impactante que vous puissiez faire. La plupart des pages peuvent diviser leur temps de chargement par deux simplement en servant des images correctement dimensionnees et compressees dans des formats modernes. Commencez par vos pages les plus lourdes et descendez de la.