La balise HTML <img>

La balise <img> est utilisée pour insérer une image dans un document HTML. L'image elle-même n'est pas insérée directement dans le document ; le navigateur insère une image HTML à partir de la source spécifiée dans la balise <img>.

Deux attributs sont requis pour un élément <img> : src, qui indique la source de l'image, et alt, qui définit un texte alternatif pour l'image.

Pour rendre les images HTML cliquables, vous devez placer la balise <img> à l'intérieur de la balise <a>, utilisée pour insérer un lien sur une image HTML.

Syntaxe

La balise <img> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Elle ne contient que des attributs. Mais en XHTML, la balise <img> doit être auto-fermante (<img />).

Exemple de la balise HTML `<img>` :

Un exemple d'utilisation de la balise HTML <img>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Essayez vous-même »

Nous pouvons utiliser CSS pour modifier l'apparence initiale d'une image.

Exemple de la balise `<img>` stylisée avec CSS :

Comment styliser une balise HTML <img> avec les propriétés CSS vertical-align et padding ?

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
      border-radius: 50%;
      border: 4px dashed #077cb9;
      width: 300px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div>
     <img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
    </div>
  </body>
</html>

Essayez vous-même »

Les attributs src et alt

L'attribut src (source) indique la source de l'image. Il est obligatoire, car il définit le chemin vers l'image. La valeur de l'attribut src peut être soit le nom du fichier, soit son URL.

L'attribut alt définit un nom alternatif pour l'image. Il est également obligatoire pour la balise <img>. Sa valeur est un texte descriptif affiché dans le navigateur avant que l'image ne soit chargée, ou si le chargement de l'image échoue.

Images décoratives et images significatives

La présence de texte dans alt dépend de la finalité de l'image :

Images significatives (une photo de produit, un graphique, un logo porteur d'information) nécessitent un alt court et descriptif qui communique la même information que l'image. Décrivez ce qu'elle montre, pas « image de ».
Images décoratives (bordures, espaces, ornements d'arrière-plan qui n'apportent rien au contenu) doivent utiliser un alt="" vide. Cela indique aux lecteurs d'écran d'ignorer l'image. N'omettez pas l'attribut alt entièrement — son absence amène certains lecteurs d'écran à annoncer le nom du fichier à la place.

<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />

<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />

Astuce

Pour les images significatives, incluez des mots-clés pertinents dans le texte alternatif lorsque cela s'intègre naturellement. Un texte alt précis contribue à la fois à l'accessibilité et au positionnement de l'image dans les moteurs de recherche.

Utilisation de « data:image/[type];base64,[base64-string] » pour l'attribut src

Le format data:image/[type];base64,[base64-string] peut être utilisé comme valeur de l'attribut src d'une balise img pour afficher une image directement depuis le code HTML, sans avoir à la charger depuis un fichier externe.

Voici un exemple d'utilisation de ce format pour afficher une image dans une balise img :

Utilisation de « data:image/[type];base64,[base64-string] » pour l'attribut src

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
  alt="Tiny base64-encoded sample image"
  width="5"
  height="5">

Dans cet exemple, image/png spécifie le type MIME de l'image, et la longue chaîne après base64, représente les données réelles de l'image encodées en base64. La chaîne ci-dessus est un PNG 5×5 complet (mais minuscule).

Notez que l'utilisation d'images encodées en base64 peut augmenter la taille du fichier HTML et ralentir le chargement de la page. Il est généralement recommandé d'utiliser ce format pour les petites images ou les icônes, et d'avoir recours à des fichiers externes pour les images plus grandes.

Exemple de la balise HTML `<img>` avec les attributs src et alt :

Un exemple de la balise img avec les attributs src et alt

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
  </body>
</html>

Essayez vous-même »

Pourquoi définir width et height

Définissez toujours les attributs width et height (en pixels, sans unité) en faisant correspondre la taille intrinsèque de l'image. Cela permet au navigateur de calculer le ratio d'aspect de l'image et de réserver l'espace correct avant que le fichier ait fini de se télécharger. Sans ces attributs, la page s'affiche d'abord sans espace pour l'image, puis saute lors de l'arrivée de l'image — une expérience désagréable qui nuit à votre Cumulative Layout Shift (CLS), l'un des Core Web Vitals de Google.

<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">

Vous pouvez toujours redimensionner l'image avec CSS. Un schéma courant et sûr consiste à définir les attributs width et height pour le ratio d'aspect, puis à laisser CSS le rendre fluide :

img {
  height: auto;   /* preserve aspect ratio */
  max-width: 100%; /* never overflow its container */
}

Les attributs loading et decoding

L'attribut loading diffère le chargement des images (et des iframes) jusqu'à ce que la ressource soit proche d'être affichée. C'est une fonctionnalité standard prise en charge par tous les navigateurs modernes.

Valeurs possibles pour l'attribut loading :

lazy — diffère le chargement jusqu'à ce que l'image atteigne un seuil de distance par rapport au viewport. À utiliser pour les images hors écran / sous la ligne de flottaison.
eager (valeur par défaut) — charge la ressource immédiatement.

<img src="defer.png" loading="lazy" alt="Gallery thumbnail" width="500" height="400">

Avertissement

N'appliquez pas le chargement différé à votre image principale au-dessus de la ligne de flottaison (souvent l'élément Largest Contentful Paint, ou LCP). Le chargement différé retarde sa requête et ralentit la perception de la page. Pour cette image, utilisez loading="eager" ou omettez simplement l'attribut.

L'attribut connexe decoding indique au navigateur comment décoder l'image. decoding="async" permet au navigateur de décoder l'image hors du thread principal, afin de ne pas bloquer le rendu du contenu environnant :

<img src="photo.jpg" alt="Landscape" width="800" height="600"
     loading="lazy" decoding="async">

Le chargement différé reporte le chargement des ressources jusqu'à ce qu'elles soient nécessaires, plutôt que de tout charger d'emblée. Cela améliore les performances et réduit la consommation de données inutile sur l'appareil de l'utilisateur.

Images responsives avec srcset et sizes

Une image fixe unique gaspille soit de la bande passante sur les petits écrans, soit semble floue sur les grands. Les attributs srcset et sizes permettent au navigateur de choisir le meilleur fichier en fonction de la taille d'écran et de la densité de pixels de l'appareil, tout en conservant un seul élément <img>.

srcset liste les fichiers image candidats, chacun associé à un descripteur de largeur (la largeur réelle de l'image en pixels, par ex. 480w).
sizes indique au navigateur la largeur d'affichage de l'image à différents points de rupture, afin qu'il puisse choisir avant que la mise en page soit calculée.

<img
  src="photo-800.jpg"
  srcset="photo-480.jpg 480w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         800px"
  alt="Coastline at sunset"
  width="800" height="600">

Ici, le navigateur lit sizes, détermine le nombre de pixels CSS nécessaires pour l'image, multiplie par le ratio de pixels de l'appareil et télécharge la correspondance la plus proche depuis srcset. Le src ordinaire reste en tant que solution de repli pour les navigateurs qui ne prennent pas en charge srcset.

Lorsque vous devez servir des recadrages différents selon les mises en page (direction artistique) ou proposer des formats modernes avec un fallback (comme AVIF/WebP avec un JPEG de secours), préférez l'élément <picture>.

Formats d'image pris en charge

Les formats de fichiers image sont des moyens standardisés d'organiser et de stocker des images numériques. Un format de fichier image peut stocker des données dans un format non compressé, un format compressé (qui peut être sans perte ou avec perte), ou un format vectoriel. (Wikipedia).

Chaque agent utilisateur prend en charge différents formats d'image. Voici la liste des formats d'image courants :

Abréviation	Format de fichier	Type MIME	Extension(s) de fichier	Compatibilité navigateur
APNG	Animated Portable Network Graphics	image/apng	.apng	Chrome, Edge, Firefox, Opera, Safari
AVIF	AV1 Image File Format	image/avif	.avif	Chrome 85+, Firefox 93+, Safari 16+, Opera
GIF	Graphics Interchange Format	image/gif	.gif	Chrome, Edge, Firefox, Opera, Safari
ICO	Microsoft Icon	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, Opera, Safari
JPEG	Joint Photographic Expert Group image	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Chrome, Edge, Firefox, Opera, Safari
PNG	Portable Network Graphics	image/png	.png	Chrome, Edge, Firefox, Opera, Safari
SVG	Scalable Vector Graphics	image/svg+xml	.svg	Chrome, Edge, Firefox, Opera, Safari
WebP	Web Picture format	image/webp	.webp	Chrome, Edge, Firefox, Opera, Safari 14+

JPEG et PNG sont universellement pris en charge et restent les choix les plus sûrs par défaut. WebP et AVIF sont des formats modernes qui produisent des fichiers nettement plus petits à qualité similaire — AVIF compresse généralement mieux, WebP bénéficie de la prise en charge la plus large. Étant donné que quelques navigateurs plus anciens ne prennent toujours pas en charge AVIF, servez ces formats via l'élément <picture> avec un fallback JPEG ou PNG plutôt que de les placer dans un simple <img src>.

Erreurs de chargement d'image

Des erreurs peuvent survenir lors du chargement d'une image. Si un gestionnaire d'événements onerror a été défini pour l'événement error, ce gestionnaire sera appelé. Voici les situations où cela peut se produire :

L'attribut src est vide ("") ou null.
L'URL du src et l'URL de la page consultée par l'utilisateur sont identiques.
Une corruption de l'image empêche son chargement.
Les métadonnées de l'image sont corrompues de telle sorte qu'il est impossible de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de la balise <img>.
Le format n'est pas pris en charge par l'agent utilisateur.

Vous pouvez écouter cet événement error avec l'attribut onerror et substituer une image de secours, afin que les utilisateurs voient un espace réservé plutôt qu'une icône d'image cassée :

<img
  src="profile.jpg"
  alt="User profile photo"
  width="200" height="200"
  onerror="this.onerror=null; this.src='fallback.png';">

Définir this.onerror=null en premier est important : cela supprime le gestionnaire avant de changer src, de sorte que si l'image de secours échoue également à se charger, le gestionnaire n'est pas déclenché à nouveau, ce qui éviterait une boucle infinie.

Attributs

Voici les attributs actuels et standards de l'élément <img>. Les attributs obsolètes sont listés séparément ci-dessous.

Attribut	Valeur	Description
alt	texte	Définit le texte alternatif de l'image. Utilisez `alt=""` pour les images purement décoratives.
crossorigin	`anonymous` \| `use-credentials`	Définit si CORS est utilisé lors du chargement de l'image. Les images chargées via CORS peuvent être utilisées dans l'élément `<canvas>` sans limiter ses fonctionnalités.
decoding	`sync` \| `async` \| `auto`	Indique au navigateur comment décoder l'image. `async` décode hors du thread principal.
height	pixels	Définit la hauteur de l'image. À définir avec `width` pour réserver l'espace et éviter le décalage de mise en page.
ismap	ismap	Indique que le contenu de la balise est une image map côté serveur.
loading	`eager` \| `lazy`	Contrôle si l'image se charge immédiatement ou est différée jusqu'à proximité du viewport.
sizes	conditions media + longueurs	Indique au navigateur la largeur d'affichage de l'image par point de rupture, utilisé avec `srcset`.
src	URL	Définit la source de l'image.
srcset	URL + descripteurs	Une liste séparée par des virgules d'images candidates avec leurs descripteurs de largeur (`w`) ou de densité (`x`).
usemap	#mapname	Spécifie un lien vers l'élément `<map>`, qui contient les coordonnées pour l'image map côté client.
width	pixels	Définit la largeur de l'image. À définir avec `height` pour réserver l'espace et éviter le décalage de mise en page.

La balise <img> prend également en charge les attributs globaux et les attributs d'événement.

Attributs obsolètes

Ces attributs sont obsolètes en HTML5. Utilisez plutôt les alternatives CSS.

Attribut	Valeurs	Description	Alternative
align	left right top bottom middle	Définit l'alignement de l'image par rapport aux éléments environnants. Centre l'image HTML par rapport aux éléments environnants.	Les propriétés CSS float et/ou vertical-align.
border	pixels	Définit la largeur de la bordure autour de l'image.	La propriété CSS border.
hspace			La propriété CSS margin à la place.
name		Spécifie un nom pour l'élément.	L'attribut id.
vspace	pixels	Définit les espaces en haut et en bas de l'image.	Utilisez la propriété CSS margin à la place.

Exercice

Pratique

Quelle est la bonne façon de baliser une image purement décorative pour que les lecteurs d'écran l'ignorent ?

Lui donner un attribut alt vide : alt='' .Omettre complètement l'attribut alt.Définir alt sur le nom du fichier image.Utiliser l'attribut title à la place de alt.

Syntaxe

Exemple de la balise HTML <img> :

Exemple de la balise <img> stylisée avec CSS :

Les attributs src et alt

Images décoratives et images significatives

Utilisation de « data:image/[type];base64,[base64-string] » pour l'attribut src

Exemple de la balise HTML <img> avec les attributs src et alt :

Pourquoi définir width et height

Les attributs loading et decoding

Images responsives avec srcset et sizes

Formats d'image pris en charge

Erreurs de chargement d'image

Attributs

Attributs obsolètes

Exercice

Exemple de la balise HTML `<img>` :

Exemple de la balise `<img>` stylisée avec CSS :

Exemple de la balise HTML `<img>` avec les attributs src et alt :