<img>

Résumé

L'élément <img> HTML (ou HTML Image Element en anglais) représente une image du document.

Note à l'utilisateur :
Les navigateurs n'affichent pas toujours l'image référencée par l'élément. C'est notamment le cas pour les navigateurs non-graphiques (regroupant par exemple ceux utilisés par les personnes souffrant d'une déficience visuelle), ou si l'utilisateur choisit de ne pas afficher les images, ou si le navigateur ne peut afficher l'image parce qu'elle est invalide ou que son format n'est pas supporté. Dans ces situations, le navigateur peut remplacer l'image par le texte défini dans l'attribut alt de l'élément.

Attributs

Cet élément inclut les attributs globaux.

align Obsolète depuis HTML4.01, Obsolète depuis HTML5
Utiliser la propriété CSS vertical-align.
L'alignement de l'image au regard du contexte environnant.
alt
Cet attribut définit le texte alternatif décrivant l'image. Les utilisateurs verront ce texte affiché si l'URL de l'image est incorrecte, si l'image n'est pas dans un format supporté ou jusqu'à ce que l'image soit téléchargée.

Note d'utilisation : Omettre cet attribut signifie que l'image est une partie importante du contenu mais qu'aucun équivalent textuel n'est disponible. Faire prendre la valeur d'une chaîne de caractères vide à cet attribut indique que l'image n'est pas une partie importante du contenu. Les navigateurs non-visuels pourraient omettre cette information lors du rendu de la page.

border Obsolète depuis HTML4.01, Obsolète depuis HTML5
La largeur de la bordure autour d'une image.
crossorigin HTML5
Cet attribut énuméré indique si la requête de l'image doit être effectuée en utilisant le CORS ou non. Les images avec CORS activé peuvent être réutilisées dans un élément <canvas> sans qu'il soit corrompu. Les valeurs autorisées sont :
anonymous
Une requête d'origines multiples (cross-origin) est effectuée (c'est à dire avec l'en-tête HTTP Origin). Toutefois aucune information d'authentification n'est envoyée (pas de cookie, pas de certificat X.509, pas d'authentification HTTP simple). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (en ne réglant pas l'en-tête HTTP Access-Control-Allow-Origin:), l'image sera corrompue et son utilisation restreinte.
use-credentials
Une requête d'origines multiples (avec l'en-tête HTTP Origin:) est effectué et des informations d'authentification sont envoyées (un cookie, un certificat et une authentification HTTP simple sont effectuées). Si le serveur ne fournit pas d'informations d'authentification au site d'origine via l'en-tête HTTP Access-Control-Allow-Credentials:, l'image sera corrompue et son utilisation restreinte.
Quand cet attribut n'est pas présent, la requête de la ressource est effectuée sans requête CORS (sans envoyer d'en-tête HTTP Origin:), afin d'éviter un usage non-corrompu dans des éléments <canvas>. Si cet attribut est invalide, il est pris en compte comme si le mot-clé anonymous avait été utilisé. Voir la page attributs de réglage du CORS pour plus d'informations.
height
La hauteur de l'image en pixels CSS HTML5 ou en pixels HTML 4 ou en pourcentages.
hspace Obsolète depuis HTML4.01, Obsolète depuis HTML5
Le nombre de pixels de blanc à insérer à droite et à gauche de l'image.
ismap
Cet attribut booléen indique que l'image fait partie d'une carte (image map) côté serveur. Dans ce cas, les coordonnés précises d'un clic sont envoyées au serveur.

Note d'utilisation : Cet attribut n'est autorisé que dans un élément <img> descendant d'un élément <a> possédant un attribut href valide.

longdescHTML 4 seulement
L'URL de la description de l'image à afficher, elle complète le texte alt. En HTML5, il faut utiliser un élément  <a> classique pour lier la description.
name Obsolète depuis HTML4.01, Obsolète depuis HTML5
Un nom pour l'élément, il est supporté par HTML 4 à des seules fins de rétro-compatibilité. Il faut utiliser l'attribut id à la place.
sizesHTML5
Une liste d'une ou plusieurs chaînes séparées par des virgules, indiquant un choix de différentes tailles pour la source. Chaque taille est composée de :
  1. Une condition de média. Elle doit être omise pour le dernier item.
  2. La valeur de la taille de la source

Les valeurs de la taille de la source sont utilisées pour spécifier la taille de l'image prévue, pour choisir une source dans la liste de l'attribut srcset, quand il utilise le descripteur 'w'. La taille choisie affecte la taille intrinsèque de l'image (taille inhérente, si aucun style CSS n'est appliqué). Si l'attribut srcset est absent, ou ne contient pas de valeur 'w', l'attribut sizes n'a pas d'effet.

src
L'URL de l'image, cet attribut est obligatoire pour l'élément <img>.
srcsetHTML5
Une liste d’une ou plusieurs chaînes de caractères séparées par des virgules indique l'ensemble des images possibles en fonction de l'user-agent utilisé. Ces chaînes son composée de :
  1. l'URL vers une image,
  2. Une description de la largeur de la fenêtre (un nombre entier positif directement suivi par 'w'). Si la valeur n'est pas indiquée, la valeur par défaut est l'infini.
  3. Une description de la densité de pixel (un nombre entier positif directement suivi par 'x'). SI la valeur n'est pas renseignée, sa valeur par défaut est 1X.

Chaque chaîne doit au moins renseigner une largeur ou une densité pour être valide. Dans cette liste, il ne peut y avoir deux fois la même description.
Le navigateur choisit l'image la mieux adaptée à afficher à un moment donné.

width
La largeur de l'image en pixels ou en pourcentage.
usemap
L'URL partielle (commençant par un '#') d'un élément <map> associé avec l'élément.

Note d'utilisation : Vous ne pouvez utiliser cet attribut si l'élément <img> est un descendant d'un élément <a> ou d'un élément <button>.

vspace Obsolète depuis HTML4.01, Obsolète depuis HTML5
Le nombre de pixels de blanc à ajouter au-dessus et en-dessous de l'image.

Formats d'image supportés

Le standard HTML ne fournit pas une liste des formats d'image qui doivent être supportés, c'est pourquoi chaque agent supporte une ensemble de formats différent. Le moteur de rendu Gecko supporte les formats suivants :

Note :
Le support pour le format XBM a été retiré dans Gecko 1.9.2.

Interaction avec le CSS

Au niveau du CSS un élément <img> est un élément remplacé. Il n'a pas de ligne de base, ce qui veut dire que quand il est utilisé dans un environnement au format texte (inline) : vertical-align: baseline, le bas de l'image sera affiché au niveau de la ligne de base du conteneur.

Selon son type, une image peut avoir, mais pas nécessairement, une dimension intrinsèque. Une image vectorielle (SVG) n'a pas de dimension intrinsèque alors qu'une image matricielle en a une.

Exemple 1 :

<img src="mdn-logo-sm.png" alt="MD Logo" />

MD Logo

Exemple 2 : Lien sur une image

<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN Logo" /> </a>

MDN Logo

Exemple 3 : Utilisation de l'attribut srcset

L'attribut src est ignoré par les navigateurs supportant  srcset. L'image affichée dépendra du type d'écran.

<img src="mdn-logo-sm.png" 
      alt="MD Logo" 
      srcset="mdn-logo-HD.png 2x, mdn-logo-small.png 15w, mdn-banner-HD.png 100w 2x" />

Exemple 4 : Utilisation des attributs srcset et sizes

L'attribut src est ignoré pour les user-agent supportant srcset quand le descripteur est utilisé 'w'. Quand la condition du média correspondant est vraie (min-width: 600px), l'image va avoir une largeur de 200px, autrement 50vw (50 % de la largeur viewport).

<img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

Spécifications

Spécification Statut Commentaires
WHATWG HTML Living Standard
La définition de '<img>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<img>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<img>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui) (Oui) (Oui) (Oui)
Attribut srcset 34.0 32.0 (32.0) (behind a pref) Pas de support 21 8
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
Attribut srcset Pas de support Pas de support Pas de support Pas de support 8 (Oui)

Voir également

Étiquettes et contributeurs liés au document

Contributeurs à cette page : FranckCo, louuis, Alexfrits, msherefel, tregagnon, oLibre, SphinxKnight, Goofy
Dernière mise à jour par : FranckCo,