Les images représentent souvent 50% du poids d'une page. Bien les optimiser améliore votre SEO, votre vitesse de chargement et votre accessibilité.
L'attribut alt (texte alternatif) décrit le contenu de l'image pour :
Référencement images
Lecteurs d'écran
Si l'image ne charge pas
Exemple de code :
<img src="gateau-chocolat.jpg" alt="Gâteau au chocolat fait maison décoré de fraises" width="800" height="600">
Décrivez ce que montre l'image, pas ce que vous voulez qu'elle soit.
✓ Bon
alt="Équipe de développeurs travaillant sur un projet dans un bureau moderne"
✗ Mauvais
alt="image1" ou alt="photo"
Si c'est pertinent, incluez votre mot-clé dans le texte alt, mais sans forcer. Le bourrage de mots-clés est pénalisé.
Renommez vos images avant de les uploader.
✓ Bon
gateau-chocolat-maison.jpg
✗ Mauvais
IMG_20240115_123456.jpg
Définir les dimensions évite le "layout shift" (CLS) lors du chargement.
<img src="photo.jpg" alt="Description" width="800" height="600">
Chargez les images uniquement quand elles arrivent dans le viewport.
<img src="photo.jpg" alt="Description" loading="lazy">
Utilisez WebP ou AVIF pour des images plus légères avec la même qualité.