<img> : l'élément d'image embarquée

L'élément HTML <img> intègre une image dans le document.

Dans l'exemple qui précède, on utilise l'élément <img> simplement.

  • L'attribut src est obligatoire et contient le chemin de l'image qu'on souhaite afficher.
  • L'attribut alt contient une description textuelle de l'image, qui n'est pas obligatoire mais qui est incroyablement utile pour l'accessibilité — les lecteurs d'écran lisent cette description à leurs utilisateurs pour qu'ils sachent ce que signifie l'image. Le texte Alt est également affiché sur la page si l'image ne peut pas être chargée pour une raison quelconque : par exemple, erreurs de réseau, blocage du contenu ou linkrot.

Il existe d'autres attributs qui peuvent être utilisés dans différents cas. Ces attributs sont détaillés ci-après. Entre autres, on pourra utiliser :

Formats d'image pris en charge

La norme HTML ne donne pas de liste des formats d'image qui doivent être pris en charge, de sorte que chaque agent utilisateur prend en charge un ensemble différent de formats.

Abréviation Format du fichier (en) Type de MIME Extention(s) du fichier Résumé Prise en charge navigateur
APNG Animated Portable Network Graphics image/apng .apng Bon choix pour les animations sans perte de qualité. AVIF et WebP ont de meilleures performances mais une moins bonne couverture des navigateurs. Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
AVIF AV1 Image File Format image/avif .avif Un format avec de bonnes performances et sans licence commerciale qui peut être utilisé pour les images statiques comme animées. Il offre une meilleure compression que PNG et JPEG et une meilleure profondeur de couleur. Il est préférable d'utiliser des formats alternatifs via l'élément <picture> pour s'adapter aux différentes prises en charge des navigateurs. Chrome, Edge, Firefox (fonctionnalités de base), Opera
GIF Graphics Interchange Format image/gif .gif Un bon choix pour les images simples et les animations. On préfèrera toutefois PNG pour les images statiques sans pertes de compression et WebP, AVIF ou APNG pour les animations afin d'avoir de meilleures compressions. Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEG Joint Photographic Expert Group image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp Un bon choix pour les images compressées avec pertes. C'est le format le plus populaire et parmi les mieux pris en charge. PNG sera préférable si on préfère une meilleure fidélité à l'image et WebP/AVIF permettront d'avoir de meilleurs taux de compression. Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG Portable Network Graphics image/png .png PNG pourra être préféré à JPEG lorsqu'on a besoin d'une meilleure précision ou de transparence. WebP/AVIF permettront d'avoir de meilleurs taux de compression mais leur prise en charge navigateur est plus faible. Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVG Scalable Vector Graphics image/svg+xml .svg Un format d'image vectoriel idéal pour les éléments d'interface utilisateur, les icônes ou diagrammes qui nécessitent de s'afficher précisément quelle que soit l'échelle. Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
WebP Web Picture image/webp .webp Un excellent choix pour les images statiques ou animées. Les taux de compression de ce format sont meilleurs que pour PNG ou JPEG. Ce format prend également en charge de meilleures profondeurs pour les couleurs, les frames animées, la transparence, etc. Chrome, Edge, Firefox, Opera

Astuce :

Voir le Guide des types et formats de fichiers image pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).

Erreurs de chargement des images

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 (en-US), 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'image 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.

Attributs

Cet élément inclut les attributs globaux.

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

Note :

Les navigateurs n'affichent pas toujours les images. Il existe un certain nombre de situations dans lesquelles un navigateur peut ne pas afficher les images, par exemple :

  • Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles)
  • L'utilisateur choisit de ne pas afficher les images (économie de bande passante, raisons de confidentialité).
  • L'image n'est pas valide ou le type n'est pas pris en charge.

Dans ces cas, le navigateur peut remplacer l'image par le texte de l'attribut alt de l'élément. Pour ces raisons et d'autres, fournissez une valeur utile pour alt dans la mesure du possible.

Omettre complètement alt indique que l'image est un élément clé du contenu et qu'aucun équivalent textuel n'est disponible. Définir cet attribut sur une chaîne vide (alt="") indique que cette image n'est pas un élément clé du contenu (il s'agit d'une décoration ou d'un pixel de suivi), et que les navigateurs non visuels peuvent l'omettre au rendu. Les navigateurs visuels masqueront également l'icône d'image brisée si le alt est vide et que l'image n'a pas réussi à s'afficher.

Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet.

crossorigin

Indique si la récupération de l'image doit être effectuée à l'aide d'une requête CORS. Les données d'image d'une image compatible avec le système CORS renvoyées par une requête CORS peuvent être réutilisées dans l'élément <canvas> sans être marquées « corrompu ».

Si l'attribut crossorigin n'est pas spécifié, une requête non-CORS est envoyée (sans l'en-tête de requête Origin), et le navigateur marque l'image comme étant corrompue et restreint l'accès à ses données d'image, empêchant son utilisation dans les éléments <canvas>.

Si l'attribut crossorigin est spécifié, alors une requête CORS est envoyée (avec l'en-tête de requête Origin) ; mais si le serveur n'autorise pas l'accès croisé aux données de l'image par le site d'origine (en n'envoyant pas d'en-tête de réponse Access-Control-Allow-Origin ou en n'incluant pas l'origine du site dans l'en-tête de réponse Access-Control-Allow-Origin qu'il envoie), le navigateur bloque le chargement de l'image et enregistre une erreur CORS dans la console devtools.

Valeurs autorisées :

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.
decoding

Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :

sync
L'image est décodée de façon synchrone afin d'être présentée de façon atomique avec le reste du contenu.
async
L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à la présentation du reste du contenu.
auto
Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.
height
La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité.
intrinsicsize
Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer naturalWidth/naturalHeight sur de telles images renverrait les valeurs de cet attribut. Explications, exemples.
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.

loading
Indique comment le navigateur doit charger l'image :
  • eager : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).
  • lazy : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques.

    Note :

    Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.

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 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éma, 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é.
  • 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.
sizes
Une ou plusieurs chaînes de caractères séparées par des virgules, indiquant un ensemble de tailles sources. Chaque taille source est composée de :
  1. D'une condition sur le média. Qui doit être absente pour le dernier élément de la liste.
  2. Une valeur de taille de la source.

Les conditions de média décrivent les propriétés de la fenêtre de visualisation (ou « viewport »), et non de l'image. Par exemple, (max-height : 500px) 1000px propose d'utiliser une source de 1000px de largeur, si la fenêtre de visualisation n'est pas supérieure à 500px.

Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. Les agents utilisateurs utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut srcset, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (w). La taille de la source sélectionnée affecte la taille intrinsèque (en-US) de l'image (la taille d'affichage de l'image si aucun style CSS n'est appliqué). Si l'attribut srcset est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut sizes n'a 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 ».
srcset*
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 l'une des sources disponibles à sa discrétion. Il dispose ainsi d'une marge de manœuvre importante pour adapter sa sélection en fonction de choses comme les préférences de l'utilisateur ou les conditions de bande passante. Voir notre Tutoriel sur les images responsives pour un exemple.

width
La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité.
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
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 voire la propriété object-position qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :
top
Équivalent à vertical-align: top; ou à vertical-align: text-top;
middle
Équivalent à vertical-align: -moz-middle-with-baseline;
bottom
La valeur utilisée par défaut. Équivalent à vertical-align: unset; ou à vertical-align: initial;
left
Équivalent à float: left;
right
Équivalent à float: right;
border
La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété CSS border.
hspace
Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS margin.
longdesc
Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (id) d'un élément.

Note :

Cet attribut est mentionné dans la dernière version du W3C, HTML 5.2, mais a été supprimé du HTML Living Standard du WHATWG. Son avenir est incertain ; les auteurs devraient utiliser une alternative WAI-ARIA telle que aria-describedby ou aria-details.

name
Un nom pour l'élément. Utilisez plutôt l'attribut id.
vspace
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.

Mettre en forme avec CSS

<img> est un élément remplacé ; il a une valeur display de inline par défaut, mais ses dimensions par défaut sont définies par les valeurs intrinsèques de l'image intégrée, comme s'il s'agissait de inline-block. Vous pouvez définir des propriétés comme border/border-radius, padding/margin, width, height, etc. sur une image.

<img> n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec vertical-align : baseline, le bas de l'image sera placé sur la ligne de base du texte.

Vous pouvez utiliser la propriété object-position pour positionner l'image dans la boîte de l'élément, et la propriété object-fit pour ajuster la taille de l'image dans la boîte (par exemple, si l'image doit s'adapter à la boîte ou la remplir même si un découpage est nécessaire).

En fonction de son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour certains types d'images, cependant, les dimensions intrinsèques sont inutiles. Les images SVG, par exemple, n'ont pas de dimensions intrinsèques si leur élément <svg> n'a pas de width ou de height défini sur lui.

Exemples

Texte alternatif

L'exemple suivant intègre une image dans la page et inclut un texte alternatif pour l'accessibilité.

<img src="favicon144.png"
  alt="MDN logo">

Cet exemple s'appuie sur le précédent, en montrant comment transformer l'image en lien. Pour ce faire, immergez la balise <img> à l'intérieur de l'élément <a>. Vous devez faire en sorte que le texte alternatif décrive la ressource vers laquelle le lien pointe, comme si vous utilisiez un lien texte à la place.

<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visitez le site du MDN">
</a>

Créer un lien avec une image

Dans cet exemple, nous incluons un attribut srcset avec une référence à une version haute résolution du logo ; celle-ci sera chargée à la place de l'image src sur les appareils haute résolution. L'image référencée dans l'attribut src est comptée comme un candidat 1x dans agent utilisateur qui supporte srcset.

<img src="favicon72.png"
  alt="Logo MDN"
  srcset="favicon144.png 2x">

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-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w,
          clock-demo-400px.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

Note :

Pour observer l'effet du redimensionnement, vous devrez consulter l'exemple sur une page séparée afin de pouvoir modifier la taille de la zone.

Sécurité et vie privée

Bien que les éléments <img> soient la plupart du temps utilisés respectueusement, ils peuvent permettre de récupérer des informations précises, parfois utilisées pour pister les utilisateurs. Voir la page sur l'en-tête referer pour plus d'informations et des façons de résoudre ces problèmes.

Problèmes d'accessibilité

Création de descriptions alternatives significatives

L'attribut alt doit décrire le contenu de l'image de façon claire et concise. L'attribut ne doit pas décrire la présence même de l'image ou le nom du fichier. Si l'attribut alt n'est pas utilisé, car l'image ne possède pas d'équivalent textuel, il faudra utiliser d'autres méthodes alternatives pour présenter le contenu que l'image doit véhiculer.

Ce qu'il ne faut pas faire

<img alt="image" src="manchot.jpg">

Ce qu'il faut faire

<img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg">

Lorsque l'attribut alt n'est pas présent, certains lecteurs d'écran peuvent énoncer le nom du fichier. Cela peut être source de confusion, car le nom du fichier n'est pas représentatif du contenu de l'image.

L'attribut title

L'attribut title n'a pas vocation à remplacer l'attribut alt. De plus, on évitera d'utiliser la même valeur pour alt et title, car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.

L'attribut title ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fournie par alt. Si l'image nécessite une légende, on utilisera plutôt les éléments <figure> et <figcaption>.

La valeur de l'attribut title est généralement présentée sous la forme d'une bulle d'information lorsqu'on immobilise le curseur au-dessus de l'image. Bien que cette méthode puisse être utilisée pour fournir des informations supplémentaires, on ne doit pas partir du principe que ce contenu sera nécessairement vu. Si les informations présentées par title sont importantes, il faudra les présenter d'une autre façon (cf. ci-avant) pour que les utilisateurs puissent réellement en bénéficier.

Résumé technique

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ôle ARIA implicite
Rôles ARIA autorisés
Interface DOM HTMLImageElement

Spécifications

Specification
HTML Standard (HTML)
# the-img-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi