<img> : l'élément d'image embarquée
L'élément HTML <img>
permet de représenter une image dans un document. Cet élément est un élément remplacé.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
n'est pas obligatoire mais recommandé et contient une description textuelle de l'image ; il est recommandé pour des raisons d'accessibilité et sera utilisé par les lecteurs d'écran ou sera affiché si l'image ne peut pas être chargée.
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 :
- Les attributs
crossorigin
etreferrerpolicy
pour le contrôle sur le référent et la politique CORS - Les attributs
width
etheight
afin d'indiquer les dimensions intrinsèques de l'image pour s'assurer qu'elle occupe un espace stable, y compris lors du chargement - Les attributs
sizes
etsrcset
qui permettent de gérer des images responsives (à ce sujet, voir également l'élément<picture>
et notre tutoriel sur les images responsives).
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 incorecte ou si l'image n'est pas encore téléchargée).
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és par les personnes visuellement handicapées), 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émentimg
. Pour toutes ces raisons, il est fortement conseillé de fournir une valeur pertinente pouralt
lorsque c'est possible.Note : Si cet attribut est absent, cela indique que l'image joue un rôle important dans le contenu mais qu'aucun équivalent textuel n'est disponible. Si cet attribut contient une chaîne de caractères vide (
alt=""
), cela indique que l'image ne joue pas de rôle important dans la compréhension du contenu ce qui permet aux navigateurs non-graphiques de ne pas traiter l'image en question. 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 HTTPAccess-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 HTTPAccess-Control-Allow-Origin
), l'image sera corrompue et son utilisation sera restreinte.
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 commeanonymous
. 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 exprimée en pixels (en HTML 4, cette valeur pouvait être exprimée en pourcentages).
importance
- Cet attribut indique l'importance relative de la ressource. Les indicateurs de priorité sont exprimés avec les valeurs suivantes :
-
auto
: aucune préférence particulière, le navigateur peut utiliser sa propre heuristique afin de décider la priorité de l'image.high
: cette valeur indique au navigateur que l'image a une priorité élevée.low
: cette valeur indique au navigateur que l'image a une priorité faible. 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.
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.
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 HTTPReferer
ne sera pas envoyé.no-referrer-when-downgrade
: aucun en-tête HTTPReferer
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 HTTPReferer
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 HTTPReferer
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
HTML5- 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 :
- D'une condition sur le média (qui doit être absente pour le dernier élément de la liste).
- 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'attributsrcset
est absent ou ne contient aucune valeur qui soit un descripteur de largeur, l'attributsizes
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 chargesrcset
,src
est considéré comme une image candidate dont la densité de pixel vaut1x
si aucune autre image avec cette densité n'est définie viasrcset
ou sisrcset
contient des descripteurs 'w
'. srcset
HTML5- 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 :
- D'une URL vers une image,
- É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'attributsizes
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
'.
- D'un descripteur de largeur ou un entier positif directement suivi par '
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.
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/ouvertical-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 de la bordure qui entoure l'image. En HTML5, on privilégiera 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 obsolète depuis HTML 5.0. Il est également mentionné dans les dernières versions W3C HTML 5.2 mais a été retiré du standard WHATWG.
Les auteurs ne devraient plus utiliser cet attribut mais employer des alternatives WAI-ARIA comme
aria-describedby
ouaria-details
. name
- 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
- 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
The HTML standard doesn't give a list of image formats that must be supported, so each user agent supports a different set of formats.
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. Un guide à propos des formats d'image pris en charge par les navigateurs web est disponible.
Abréviation | Format du fichier (en) | Type de MIME | Extention(s) du fichier | Compatibilité des navigateurs |
---|---|---|---|---|
APNG | Animated Portable Network Graphics | image/apng |
.apng |
Chrome, Edge, Firefox, Opera, Safari |
BMP | Bitmap file | image/bmp |
.bmp |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
GIF | Graphics Interchange Format | image/gif |
.gif |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
ICO | Microsoft Icon | image/x-icon |
.ico , .cur |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg , .jpeg , .jfif , .pjpeg , .pjp |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
PNG | Portable Network Graphics | image/png |
.png |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
SVG | Scalable Vector Graphics | image/svg+xml |
.svg |
Chrome, Edge, Firefox, Internet Explorer, Opera, Safari |
TIFF | Tagged Image File Format | image/tiff |
.tif , .tiff |
None built-in; add-ons required |
WebP | Web Picture format | image/webp |
.webp |
Chrome, Edge, Firefox, Opera |
L'abréviation de chaque format renvoie à une description plus longue du format, de ses capacités et à des informations détaillées sur la compatibilité des navigateurs ; y compris les versions qui ont introduit le support et les caractéristiques spéciales spécifiques qui ont pu être introduites ultérieurement.
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.
On peut utiliser la propriété object-position
afin de positionner l'image dans la boîte de l'élément et la propriété object-fit
afin d'ajuster les dimensions de l'image dans la boîte (on choisit par exemple si l'image doit s'inscrire entièrement dans la boîte ou s'il est préférable de la rogner).
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 (en-US)
, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :
- L'attribut
src
est vide ou vautnull
. - 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.
Exemples
Définir un texte alternatif
<img src="https://developer.mozilla.org/static/img/favicon144.png"
alt="Le logo de MDN avec une silhouette de tête de dinosaure.">
Créer un lien avec une image
<a href="https://developer.mozilla.org/">
<img src="https://developer.mozilla.org/static/img/favicon144.png"
alt="Visiter le site MDN">
</a>
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="/files/16796/clock-demo-thumb-200px.png"
alt="Clock"
srcset="/files/16796/clock-demo-thumb-200px.png 200w,
/files/16796/clock-demo-thumb-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.
Accessibilité
Rédiger des descriptions
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 alternative pour présenter le contenu que l'image doit véhiculer.
Invalides
<img alt="image" src="manchot.jpg">
Valides
<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.
- An alt Decision Tree • Images • WAI Web Accessibility Tutorials (en anglais)
- Alt-texts: The Ultimate Guide - Axess Lab (en anglais)
- How to Design Great Alt Text: An Introduction - Deque (en anglais)
- Comprendre les règles WCAG 1.1
- Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)
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 fourni 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ôles ARIA autorisés | Tous les rôles sont autorisés. |
Interface DOM | HTMLImageElement |
Spécifications
Spécification | État | Commentaires |
---|---|---|
Referrer Policy La définition de 'referrer attribute' dans cette spécification. |
Candidat au statut de recommandation | 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
BCD tables only load in the browser
Voir aussi
- Les images en HTML
- Les images responsive
<picture>
<object>
<embed>
- Les propriétés CSS relatives aux images :