<img>

Description

L’élément <img> intègre une image dans la page. C’est un élément void (sans balise fermante). L’attribut src est obligatoire ; alt est obligatoire sémantiquement — il fournit une description textuelle pour les lecteurs d’écran et s’affiche si l’image ne charge pas.

Syntaxe

<img src="photo.jpg" alt="Description de la photo" width="800" height="600">

Exemples

Image responsive avec srcset :

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Vue panoramique de la ville de Lyon"
  width="800"
  height="450"
  loading="lazy"
>

Image décorative (alt vide) :

<img src="decoratif.svg" alt="" aria-hidden="true">

Image avec lazy loading et priorité :

<!-- Image hero : priorité haute, pas de lazy loading -->
<img src="hero.jpg" alt="…" fetchpriority="high" loading="eager">

<!-- Images du bas de page : chargement différé -->
<img src="produit.jpg" alt="…" loading="lazy">

Attributs spécifiques

Attribut	Type	Description
src	URL	Chemin ou URL de l’image. Obligatoire.
alt	string	Texte alternatif. Obligatoire. Vide ("") pour les images décoratives.
width	integer	Largeur intrinsèque en pixels. Permet au navigateur de réserver l’espace.
height	integer	Hauteur intrinsèque en pixels. Évite le layout shift (CLS).
srcset	string	Liste d’images pour différentes résolutions/tailles (url largeur_w ou url densité_x).
sizes	string	Conditions CSS définissant la taille d’affichage (utilisé avec srcset en w).
loading	enum	lazy (chargement différé) ou eager (immédiat, défaut).
decoding	enum	async, sync ou auto — stratégie de décodage de l’image.
fetchpriority	enum	high, low ou auto — priorité de téléchargement.
crossorigin	enum	anonymous ou use-credentials — pour les requêtes CORS.
referrerpolicy	string	Politique d’envoi du Referer HTTP.

Notes

alt obligatoire : toujours fournir alt. Pour les images décoratives sans information, utiliser alt="" (et non omettre l’attribut). L’omission de alt est invalide et force les lecteurs d’écran à lire le nom du fichier.

width et height pour éviter le CLS : définir les dimensions évite que la page saute lors du chargement de l’image. Le navigateur calcule le ratio et réserve l’espace exact.

loading="lazy" : le chargement différé est une optimisation de performance importante. Ne pas l’appliquer à l’image hero ou aux images above-the-fold.