L'élément HTML <img> permet de représenter une image dans un document.

Note : Les navigateurs peuvent ne pas toujours afficher l'image référencée par l'élément. C'est notamment le cas des navigateurs non-graphiques (utilisé par les personnes handicapées visuellemeent), lorsque l'utilisateur choisit de ne pas afficher les images ou lorsque le navigateur ne peut pas afficher l'image car elle est invalide ou que son format n'est pas pris en charge. Dans ces cas de figure, le navigateur pourra remplacer l'image avec le texte utilisé pour l'attribut alt de l'élément img. Pour toutes ces raisons, il est fortement conseillé de fournir une valeur pertinente pour alt lorsque c'est possible.

Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré, contenu tangible. Si l'élément possède un attribut usemap, c'est également un contenu interactif.
Contenu autorisé Aucun, cet élément est un élément vide.
Omission de balise Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin.
Parents autorisés Tout élément qui accepte du contenu intégré.
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLImageElement

Attributs

À l'instar de tous les autres éléments, l'élément <img> prend en charge les attributs universels.

alt
Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incoreccte ou si l'image n'est pas encore téléchargée).

Note : Si cet attribut est absent, cela indique que l'image joue un rôle important dans le contenu et qu'aucun équivalent textuel n'est disponible. Si cet attribut vaut la chaîne de caractères vide (alt=""), cela indique que l'image ne joue pas de rôle important dans le contenu et ainsi que les navigateurs non-visuels peuvent ne traiter le rendu de cette image.

crossorigin HTML5
Cet attribut à valeur contrainte indique si la récupération de l'image peut être effectuée via d'autres origines (CORS). Les images pour lesquelles le CORS a été activé peuvent être réutilisées dans un élément <canvas> sans le corrompre. Les valeurs autorisées pour cet attribut sont :
anonymous
Une requête entre deux origines est effectuée (avec l'en-tête Origin) mais aucune information d'authentification n'est transmise (aucun cookie, aucun certificat X.5090, aucune authentification simple par HTTP). Si le serveur ne fournit pas  d'informations d'authentification pour le site d'origine (en n'utilisant pas l'en-tête HTTP Access-Control-Allow-Origin), l'image sera corrompue et son utilisation sera restreinte.
use-credentials
Une requête entre deux origines est effectuée (avec l'en-tête Origin) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP Access-Control-Allow-Origin), l'image sera corrompue et son utilisation sera restreinte.
Lorsque cet attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête HTTP origin) ce qui empêche de l'utiliser dans un <canvas> sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme anonymous. Voir la page réglage des attributs CORS pour plus d'informations.
height
La hauteur intrinsèque de l'image exprimée en pixels (en HTML 4, cette valeur pouvait être exprimée en pourcentages).
ismap
Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur.

Note : Cet attribut est uniquement autorisé si l'élément <img> descend d'un élément <a> dont l'attribut href est valide.

longdesc
Un lien vers une description plus détaillée de l'image. On peut utiliser une URL ou l'identifiant d'un élément.
referrerpolicy
Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :
  • no-referrer : l'en-tête HTTP Referer ne sera pas envoyé.
  • no-referrer-when-downgrade : aucun en-tête HTTP Referer n'est envoyé lorsqu'on navigue vers une origine sans TLS (HTTPS). Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie.
  • origin : l'en-tête HTTP Referer contiendra le schém, l'hôte et le port de la page d'origine.
  • origin-when-cross-origin : lorsque la navigation se fait vers d'autres origines, les données du référent se limiteront au schéma, à l'hôte et au part. Si on navigue sur la même origine, le chemin complet de la ressource sera indiquée.
  • unsafe-url : l'en-tête HTTP Referer incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
sizesHTML5
Une liste de une ou plusieurs chaînes de caractères séparées par des virgules qui indique chacune une condition de taille. Chaque condition de taille (source size) se compose :
  1. D'une condition sur le média (qui doit être absente pour le dernier élément de la liste).
  2. D'une valeur

Les valeurs des conditions de taille définissent la taille voulue pour l'affichage de l'image. Les agents utilisateurs utilisent la taille courante afin de choisir une des images sources parmi l'attribut srcset lorsque ces sources sont décrites avec un descripteur de largeur ('w'). La condition de taille choisie a un impact sur la taille intrinsèque de l'image (c'est-à-dire la taille de l'image affichée si aucune mise en forme CSS n'est appliquée). Si l'attribut srcset est absent ou ne contient aucune valeur qui soit un descripteur de largeur, l'attribut sizes n'aura aucun effet.

src
L'URL de l'image. Cet attribut est obligatoire pour l'élément <img>. Pour les navigateurs qui prennent en charge srcset, src est considéré comme une image candidate dont la densité de pixel vaut 1x si aucune autre image avec cette densité n'est définie via srcset ou si srcset contient des descripteurs 'w'.
srcsetHTML5
Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose :
  1. D'une URL vers une image,
  2. Éventuellement d'un espace suivi :
    • D'un descripteur de largeur ou un entier positif directement suivi par 'w'. Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut sizes afin de calculer la densité de pixel réelle.
    • D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par 'x'.

Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut 1x.

Au sein d'un même attribut srcset, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par '2x').

L'agent utilisateur sélectionne au choix une des images parmi celles disponibles. Cette liberté lui permet éventuellement de prendre en compte le débit de la connexion ou les choix de l'utilisateur lors du téléchargement des images.

width
La largeur intrinsèque de l'image, exprimée en pixels. En HTML 4, la valeur pouvait être exprimée en pourcentages ou en pixels. Avec HTML5, seules les valeurs exprimées en pixels sont acceptées.
usemap
Le fragment d'URL (commençant avec #) d'une carte d'images associée à cet élément.

Note : Cet attribut ne peut pas être utilisé si l'élément <img> est un descendant d'un élément <a> ou d'un élément <button>.

Attributs obsolètes

align Obsolète depuis HTML4.01, Obsolète depuis HTML5
L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS float et/ou vertical-align.
border Obsolète depuis HTML4.01, Obsolète depuis HTML5
La largeur de la bordure qui entoure l'image. En HTML5, on privilégiera la propriété CSS border.
hspace Obsolète depuis HTML4.01, Obsolète depuis HTML5
Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS margin.
name Obsolète depuis HTML4.01, Obsolète depuis HTML5
Un nom à donner à cet élément. Cet attribut est pris en charge en HTML 4 uniquement à des fins de rétrocompatibilité. Il faut utiliser l'attribut id à la place.
vspace Obsolète depuis HTML4.01, Obsolète depuis HTML5
Le nombre de pixels blancs à insérer en dessous et au dessus de l'image. En HTML5, on privilégiera la propriété CSS margin.

Formats d'image pris en charge

Le standard HTML ne fournit pas de liste exhaustive des formats que doit prendre en charge un agent utilisateur et chaque agent utilisateur couvre différents formats. Gecko (le moteur utilisé par Firefox), prend en charge ces formats  :

Interactions avec CSS

Pour CSS, <img> est un élément remplacé. Il n'a pas de ligne de base ; aussi, lorsque les images sont utilisées dans un contexte en ligne avec vertical-align: baseline, c'est le bas de l'image qui est placé sur la ligne de base du conteneur.

Selon son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour d'autres types de fichier cependant, ces dimensions intrinsèques ne sont pas nécessaires (les images SVG, par exemple, ne possèdent pas de dimensions intrinsèques).

Erreurs

Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement onerror a été paramétré afin d'écouter l'événement error, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :

  • L'attribut src est vide ou vaut null.
  • L'URL indiquée dans l'attribut src est la même URL que celle de la page sur laquelle se trouve l'utilisateur.
  • L'image indiquée est corrompue et ne peut pas être chargée.
  • Les métadonnées de l'images sont corrompues et il est impossible de récupérer ses dimensions et aucune dimension n'est indiquée dans les attributs de l'élément <img>.
  • Le format de l'image n'est pas pris en charge par l'agent utilisateur.

Définir un texte alternatif

<img src="mdn-logo-sm.png" alt="MDN">

MDN

Créer un lien avec une image

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

MDN

Utiliser les attributs srcset et sizes

L'attribut src est ignoré lorsque l'agent utilisateur prend en charge srcset et que ce dernier contient des descripteurs avec 'w'. Dans cet exemple, lorsque la condition (min-width: 600px) est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera 50vw (ce qui correspond à 50% de la largeur de la zone d'affichage (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 État Commentaires
Referrer Policy
La définition de 'referrer attribute' dans cette spécification.
Brouillon de l'éditeur Ajout de l'attribut referrerpolicy.
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éChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
align (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
alt (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
border (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
crossorigin (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
height (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
hspace (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
ismap (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
longdesc (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
name (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
onerror (Oui) ?51 ? (Oui) (Oui)
referrerpolicy51 Non50 Non38 ?
sizes (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
src (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
srcset34 (Oui)

38

32 — 521

Non217.1
usemap (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
vspace (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
width (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
align (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
alt (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
border (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
crossorigin (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
height (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
hspace (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
ismap (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
longdesc (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
name (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
onerror (Oui) (Oui) ?51 ? (Oui) (Oui)
referrerpolicy5151 Non50 Non38 ?
sizes (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
src (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
srcset3434 (Oui)

38

32 — 521

Non218
usemap (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
vspace (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
width (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)

1. From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,