Pourquoi optimiser ses images ?
Les images sont souvent l'élément le plus lourd d'une page et, très fréquemment, l'élément mesuré par le LCP. Une image mal optimisée ralentit la page et dégrade les Core Web Vitals. À l'inverse, des images bien décrites peuvent se classer dans Google Images et dans les blocs d'images des résultats classiques, un levier fort pour l'e-commerce et le tourisme.
La checklist
- Format moderne : WebP ou AVIF, avec une compression adaptée
- Dimensions réelles : ne pas afficher en 400 px une image de 3 000 px
- Attributs width et height pour réserver la place et éviter les décalages (CLS)
- Lazy loading pour les images sous la ligne de flottaison, jamais pour l'image principale
- Nom de fichier descriptif : tente-tipi-4-places.webp plutôt que IMG_4521.jpg
- Texte alternatif qui décrit l'image pour les personnes malvoyantes et pour Google
- Image dans le HTML (balise img) plutôt qu'en image de fond CSS quand elle porte du sens
<img src="/images/tente-tipi-4-places.webp"
alt="Tente tipi 4 places montée en forêt"
width="800" height="600" loading="lazy">Termes liés
- Balise AltAttribut HTML décrivant le contenu d'une image, utilisé par les moteurs de recherche et les lecteurs d'écran pour l'accessibilité.
- Vitesse de chargementTemps nécessaire pour qu'une page web s'affiche complètement dans le navigateur de l'utilisateur.
- Lazy loadingTechnique qui charge les images et vidéos seulement quand elles approchent de la zone visible de l'écran.
- Core Web VitalsEnsemble de métriques Google mesurant l'expérience utilisateur : vitesse de chargement, interactivité et stabilité visuelle.