Images et textes alternatifs

01L’élément image

Une balise img a besoin d’une source et d’un texte alternatif adapté. Les attributs width et height aident le navigateur à réserver la bonne place pendant le chargement.

<img src="images/kitchen.webp"
     alt="Oak kitchen with a white island"
     width="1200" height="800">

02Rédiger un texte alternatif utile

Décrivez l’information apportée par l’image. Une image purement décorative doit avoir un attribut alt vide. Ne mettez pas les instructions importantes seulement dans une image.

<img src="divider.svg" alt="">
<figure>
  <img src="desk.webp" alt="Wall-mounted oak desk" width="900" height="600">
  <figcaption>A compact workspace.</figcaption>
</figure>

03Optimiser le chargement

Redimensionnez et compressez les fichiers avant de publier. Chargez les images éloignées avec lazy loading, mais pas systématiquement l’image principale. CSS permet de garder l’image dans son conteneur.

<img src="gallery.webp" alt="Finished shelving"
     width="900" height="600" loading="lazy">
<style>
  img { max-width: 100%; height: auto; }
</style>

04À vous de jouer

Modifiez la légende. Pour une vraie photo, décrivez ce qu’elle apporte dans son texte alt.

Pour aller plus loin

Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.