Images et texte alternatif

Un élément img a besoin de deux attributs pour être utile : src, qui dit où se trouve l'image, et alt, qui dit ce qu'elle montre quand on ne peut pas la voir.

L'élément img

Les images ne sont pas stockées dans le fichier HTML. La page pointe vers elles, et le navigateur va chercher chacune comme un fichier séparé. C'est l'élément <img> qui pointe. C'est un élément vide, il n'a donc pas de balise fermante, et son attribut src contient l'adresse de l'image, absolue ou relative, exactement comme le href d'un lien. Les images sont des éléments remplacés : le navigateur remplace l'élément par l'image, et c'est l'image qui décide de sa taille, sauf indication contraire.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Les attributs width et height donnent la taille de l'image en pixels, sans unité. Mets-y la taille réelle du fichier. Le HTML arrive en général avant les images : sans ces nombres, le navigateur place d'abord le texte puis le repousse vers le bas à chaque image qui finit de charger, ce qui est désagréable si tu as commencé à lire. Avec eux, le navigateur réserve la bonne place dès le départ. Pour afficher une image plus petite ou plus grande, utilise CSS plutôt que de changer ces nombres.

Écrire le texte alternatif

L'attribut alt contient une alternative textuelle. Un lecteur d'écran la lit à voix haute, un navigateur l'affiche quand le fichier ne se charge pas, et les moteurs de recherche la lisent pour comprendre l'image. MDN propose un test simple : que perdrait-on si l'image ne s'affichait pas ? Écris cela, brièvement. Pour la photo d'un produit, décris ce qu'il faudrait savoir pour le choisir. Pour un graphique, donne ce que le graphique montre, par exemple Les ventes ont triplé de janvier à mars, plutôt que Diagramme en barres.

• Ne commence pas par Image de ou Photo de. Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image.
• Les images décoratives, comme une ligne de séparation ondulée, reçoivent un alt="" vide. Les lecteurs d'écran les sautent alors. Omettre complètement alt, c'est différent : certains lecteurs d'écran lisent alors le nom du fichier.
• Si une image est le seul contenu d'un lien, son texte alternatif devient le texte du lien : décris donc où mène le lien (Accueil), pas l'image (Logo pain).
• Si la même information figure déjà dans le texte à côté de l'image, alt="" évite de la dire deux fois.

Figures et légendes

Quand une image a une légende, entoure les deux avec <figure> et place la légende dans <figcaption>. Cela relie la légende à l'image pour les technologies d'assistance, ce que ne fait pas un simple paragraphe sous l'image. Une légende et un texte alternatif n'ont pas le même rôle : tout le monde lit la légende, alors que alt remplace l'image quand elle manque. Ils ne doivent pas simplement se répéter. Une figure ne contient pas forcément une image ; un extrait de code, un tableau ou un poème peuvent aussi être des figures.

Formats, URL data et SVG en ligne

Les photos sont en général en JPEG ou en WebP, les graphismes plats aux bords nets en PNG, et les dessins faits de formes souvent en SVG, un format texte qui reste net à toutes les tailles. Une petite image peut même être écrite directement dans le src sous forme d'URL data commençant par data:image/svg+xml, ; les exercices ci-dessous l'utilisent pour que rien ne se charge depuis un autre site. Un SVG peut aussi s'écrire directement dans le HTML avec un élément <svg>. Donne-lui role="img" et un enfant <title> pour que les lecteurs d'écran aient un nom à annoncer. Enfin, loading="lazy" sur les images placées loin dans une longue page indique au navigateur d'attendre que le lecteur s'en approche en faisant défiler.

Encore une règle de MDN : n'utilise que des images que tu as le droit d'utiliser. Les images trouvées en ligne sont protégées par le droit d'auteur, sauf si leur licence dit le contraire, et faire pointer ton src vers le serveur de quelqu'un d'autre sans permission, ce qu'on appelle le hotlinking, lui fait aussi payer ton trafic.