HTML — Images

L’élément img insère une image. Un HTML bien construit réserve sa place, choisit une source adaptée et fournit un texte alternatif qui correspond à son rôle.

Une image peut expliquer, documenter, décorer ou servir de lien. Un HTML bien construit réserve sa place dans la page, choisit une source adaptée et lui associe le bon texte alternatif. Le choix de alt dépend du rôle de l’image dans son contexte, pas simplement des objets qu’elle représente.

Écrire un élément img complet

src désigne la ressource, alt fournit une alternative textuelle et les dimensions intrinsèques width et height définissent un rapport largeur-hauteur qui évite les décalages de mise en page. Le CSS peut ensuite rendre l’image adaptable avec max-width: 100% et height: auto.

<img
  src="team-review.jpg"
  alt="Trois développeurs consultent ensemble une liste de vérification d’accessibilité"
  width="1200"
  height="800"
  loading="lazy"
>

• Choisissez alt selon le rôle de l’image dans ce contexte.
• Utilisez un alt vide pour les images décoratives.
• Précisez les dimensions intrinsèques de l’image.
• Différez le chargement des images situées sous la zone visible à l’ouverture de la page.
• Ne placez pas d’information textuelle essentielle uniquement dans une image.