Décrire et alléger les images pour qu’elles servent le texte
Description
Ce critère vérifie les images de la page. Parmi les images de contenu (visibles, d’au moins 50 × 50 px, non marquées comme décoratives), 90 % au moins doivent avoir un texte alternatif et 90 % déclarer leurs dimensions. 80 % au moins des images matricielles doivent être en WebP ou AVIF (les SVG ne comptent pas), et aucune image ne doit dépasser 500 Ko.
iPand vérifie la présence du texte alternatif, pas sa justesse, et ne juge pas la qualité visuelle des images.
Pourquoi c’est important pour les IA
Un robot qui lit le texte de la page ne voit de l’image que son texte alternatif. Google l’utilise, avec la vision par ordinateur et le contenu de la page, pour comprendre le sujet d’une image, et conseille d’appuyer le texte par des images de qualité. Les images sont aussi souvent ce qui pèse le plus dans une page.
- Un texte alternatif précis dit ce que montre l’image : un produit, un lieu, une personne.
- WebP et AVIF compressent bien mieux que JPEG et PNG : la page se charge plus vite.
- Des dimensions déclarées réservent la place de l’image et évitent que la page se décale pendant le chargement.
Comment corriger
- 1 Décrivez chaque visuel dans son texte alternatif Renseignez l’attribut alt de chaque image utile en une courte phrase : « Vélo cargo électrique bleu devant l’atelier » plutôt que « image1 » ou une liste de mots-clés. Pour une image purement décorative, laissez un alt vide (alt="") : elle n’est pas comptée.
- 2 Convertissez les images en WebP ou AVIF Exportez photos et illustrations en WebP ou AVIF, depuis votre outil d’édition ou une extension de votre CMS. Pour garder un JPEG en repli, proposez les deux dans un élément <picture> : le navigateur ne télécharge que le premier format qu’il sait lire.
- 3 Allégez les images lourdes Aucune image ne doit dépasser 500 Ko. Redimensionnez chaque image à sa taille d’affichage, compressez-la, et proposez plusieurs tailles avec srcset et sizes pour que les mobiles reçoivent une version adaptée.
- 4 Déclarez largeur et hauteur Ajoutez les attributs width et height à chaque balise <img>, aux proportions de l’image, ou réservez sa place avec la propriété CSS aspect-ratio. Le navigateur garde alors l’emplacement pendant le chargement, même si la feuille de style adapte ensuite la taille.
À retenir
Des images décrites, légères et aux dimensions déclarées aident les moteurs à comprendre la page et la rendent plus rapide. iPand vérifie ces quatre points à chaque analyse ; la justesse de vos textes alternatifs reste à relire vous-même.
