<img>

Résumé

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

• Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré, contenu tangible. Si l'élément a un attribut usemap  il fait aussi partie de la catégorie de contenu interactif.
• Contenu autorisé Aucun, cet élément est un empty element.
• Omission de balise Doit posséder une balise initiale, ne doit pas avoir de balise finale.
• Éléments parents autorisés Tout élément acceptant du contenu intégré.
• Interface DOM HTMLImageElement

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ée 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ée par des virgules indique l'ensemble des images possibles en fonction de l'user-agent utilisé. Ces chaînes sont composées 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 un ensemble de formats différents. Le moteur de rendu Gecko supporte les formats suivants :

• JPEG
• GIF, y compris les GIFs animés
• PNG
• APNG
• SVG
• BMP
• BMP ICO
• PNG ICO

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" />

Exemple 2 : Lien sur une image

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

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

Compatibilité des navigateurs

Voir également

• Les éléments <object> et <embed>