Optimiser les images pour les Core Web Vitals et le LCP

Les images représentent généralement la plus grosse part du poids d'une page. La vitesse influant directement sur l'expérience et le référencement, leur optimisation est l'une des actions les plus rentables. Google la mesure via les Core Web Vitals — et les images sont au cœur de deux d'entre eux.

Comment les images influencent les Core Web Vitals

Le LCP (Largest Contentful Paint) mesure le temps de rendu du plus grand élément visible. Sur la plupart des pages, c'est une image d'en-tête ou une grande photo : une image lourde et lente fait directement grimper le LCP. Objectif : moins de 2,5 secondes.

Le CLS (Cumulative Layout Shift) mesure les mouvements inattendus du contenu pendant le chargement. Sans dimensions déclarées, le navigateur ne réserve pas la place de l'image — et tout saute à son arrivée. Ces deux problèmes se corrigent avec quelques techniques.

1. Utiliser un format moderne

Passer de JPEG ou PNG à WebP ou AVIF réduit souvent la taille de 25 à 50% à qualité visuelle égale. Des fichiers plus légers se téléchargent plus vite, ce qui abaisse directement le LCP. Convertir un dossier entier d'un coup — comme avec Scrunch — est le moyen le plus rapide de l'appliquer à tout le site.

2. Servir les images à leur taille d'affichage

Erreur très courante : téléverser une photo de 4000 pixels et l'afficher dans un conteneur de 800. Le navigateur télécharge quand même le fichier complet. Redimensionnez à peu près à la taille d'affichage (jusqu'à 2x pour les écrans retina) : l'économie est spectaculaire.

3. Utiliser des images responsives

L'attribut srcset laisse le navigateur choisir la bonne image pour chaque écran. Un téléphone ne devrait jamais télécharger l'image d'en-tête du bureau. Proposer quelques largeurs garantit de petits fichiers aux petits écrans — crucial pour les Core Web Vitals mobiles.

4. Chargement différé hors écran

Mais jamais pour l'image principale

Ajouter loading="lazy" aux images sous la ligne de flottaison en diffère le chargement, économisant la bande passante. En revanche, l'image LCP en haut de page doit charger immédiatement — idéalement avec fetchpriority="high" — pour apparaître au plus vite.

5. Réserver l'espace pour éviter les sauts

Définissez toujours les attributs width et height (ou un aspect-ratio CSS). Le navigateur réserve alors le bon espace avant le chargement, et le saut qui pénalise le CLS disparaît.

Check-list rapide

• Convertir les images en WebP ou AVIF
• Redimensionner à la taille réelle d'affichage (~2x pour retina)
• Fournir des largeurs responsives via srcset
• Lazy loading sous la ligne de flottaison
• Prioriser l'image LCP/d'en-tête
• Définir width et height contre les sauts de mise en page

Le format et la taille sont la base : commencez là. Scrunch gère l'étape de conversion et de compression — plusieurs images à la fois, dans votre navigateur.