diff options
Diffstat (limited to 'files/fr/web/html/element')
| -rw-r--r-- | files/fr/web/html/element/img/clock-demo-200px.png | bin | 0 -> 90575 bytes | |||
| -rw-r--r-- | files/fr/web/html/element/img/clock-demo-400px.png | bin | 0 -> 90575 bytes | |||
| -rw-r--r-- | files/fr/web/html/element/img/favicon144.png | bin | 0 -> 3086 bytes | |||
| -rw-r--r-- | files/fr/web/html/element/img/favicon72.png | bin | 0 -> 2061 bytes | |||
| -rw-r--r-- | files/fr/web/html/element/img/index.html | 608 |
5 files changed, 319 insertions, 289 deletions
diff --git a/files/fr/web/html/element/img/clock-demo-200px.png b/files/fr/web/html/element/img/clock-demo-200px.png Binary files differnew file mode 100644 index 0000000000..999ad528fe --- /dev/null +++ b/files/fr/web/html/element/img/clock-demo-200px.png diff --git a/files/fr/web/html/element/img/clock-demo-400px.png b/files/fr/web/html/element/img/clock-demo-400px.png Binary files differnew file mode 100644 index 0000000000..999ad528fe --- /dev/null +++ b/files/fr/web/html/element/img/clock-demo-400px.png diff --git a/files/fr/web/html/element/img/favicon144.png b/files/fr/web/html/element/img/favicon144.png Binary files differnew file mode 100644 index 0000000000..e30b574b65 --- /dev/null +++ b/files/fr/web/html/element/img/favicon144.png diff --git a/files/fr/web/html/element/img/favicon72.png b/files/fr/web/html/element/img/favicon72.png Binary files differnew file mode 100644 index 0000000000..db68260ca1 --- /dev/null +++ b/files/fr/web/html/element/img/favicon72.png diff --git a/files/fr/web/html/element/img/index.html b/files/fr/web/html/element/img/index.html index 5f992aa816..c166e8371d 100644 --- a/files/fr/web/html/element/img/index.html +++ b/files/fr/web/html/element/img/index.html @@ -2,378 +2,408 @@ title: '<img> : l''élément d''image embarquée' slug: Web/HTML/Element/Img tags: + - Content - Element + - Graphics - HTML + - HTML Graphics + - HTML Images + - HTML Photos + - HTML Pictures + - HTML embedded content + - Image + - Image Element + - Media + - Multimedia + - Photos + - Pictures - Reference - Web translation_of: Web/HTML/Element/img +browser-compat: html.elements.img --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><img></code></strong> permet de représenter une image dans un document. Cet élément est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>.</p> +<p>L'élément HTML <strong><code><img></code></strong> intègre une image dans le document.</p> <div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> +<p>Dans l'exemple qui précède, on utilise l'élément <code><img></code> simplement.</p> -<p>Dans l'exemple qui précède, on utilise l'élément <code><img></code> simplement. L'attribut <code>src</code> est obligatoire et contient le chemin de l'image qu'on souhaite afficher. L'attribut <code>alt</code> 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.</p> +<ul> + <li>L'attribut <code>src</code> est obligatoire et contient le chemin de l'image qu'on souhaite afficher.</li> + <li>L'attribut <code>alt</code> contient une description textuelle de l'image, qui n'est pas obligatoire mais qui est <strong>incroyablement utile</strong> 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.</li> +</ul> <p>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 :</p> <ul> - <li>Les attributs <code>crossorigin</code> et <code>referrerpolicy</code> pour le contrôle sur le référent et la politique <a href="/fr/docs/Web/HTTP/CORS">CORS</a></li> - <li>Les attributs <code>width</code> et <code>height</code> afin d'indiquer les dimensions intrinsèques de l'image pour s'assurer qu'elle occupe un espace stable, y compris lors du chargement</li> - <li>Les attributs <code>sizes</code> et <code>srcset</code> qui permettent de gérer des images <em>responsives</em> (à ce sujet, voir également l'élément {{HTMLElement("picture")}} et <a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">notre tutoriel sur les images <em>responsives</em></a>).</li> + <li><a href="/fr/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/<a href="/fr/docs/Glossary/CORS">CORS</a> contrôle pour la sécurité et la confidentialité : voir <a href="#attr-crossorigin"><code>crossorigin</code></a> et <a href="#attr-referrerpolicy"><code>referrerpolicy</code></a>.</li> + <li><a href="#attr-width"><code>width</code></a> et <a href="#attr-height"><code>height</code></a> pour définir la taille intrinsèque de l'image, ce qui lui permet d'occuper de l'espace avant son chargement, afin d'atténuer les décalages de présentation du contenu.</li> + <li>Des indications d'images adaptatives avec <a href="#attr-sizes"><code>sizes</code></a> et <a href="#attr-srcset"><code>srcset</code></a>. (voir aussi l'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> et notre <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Tutoriel sur les images adaptatives</a>).</li> </ul> -<h2 id="Attributs">Attributs</h2> +<h2 id="supported_image_formats">Formats d'image pris en charge</h2> -<p>À l'instar de tous les autres éléments, l'élément <code><img></code> prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>La norme HTML ne donne pas de liste des formats d'image qui doivent être pris en charge, de sorte que chaque <a href="/fr/docs/Glossary/User_agent">agent utilisateur</a> prend en charge un ensemble différent de formats.</p> -<dl> - <dt>{{htmlattrdef("alt")}}</dt> - <dd>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). - <div class="note"> - <p><strong>Note :</strong> 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 <code>alt</code> de l'élément <code>img</code>. Pour toutes ces raisons, il est fortement conseillé de fournir une valeur pertinente pour <code>alt</code> lorsque c'est possible.</p> - - <p><strong>Note : </strong>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 (<code>alt=""</code>), 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.</p> - </div> - </dd> - <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut à valeur contrainte indique si la récupération de l'image peut être effectuée via d'autres origines (<em>CORS</em>). Les images pour lesquelles le <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">CORS a été activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP#Qu'est-ce_qu'un_canevas_«_corrompu_»">corrompre</a>. Les valeurs autorisées pour cet attribut sont :</dd> - <dd> - <dl> - <dt><code>anonymous</code></dt> - <dd>Une requête entre deux origines est effectuée (avec l'en-tête {{httpheader("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 {{httpheader("Access-Control-Allow-Origin")}}), l'image sera corrompue et son utilisation sera restreinte.</dd> - <dt><code>use-credentials</code></dt> - <dd>Une requête entre deux origines est effectuée (avec l'en-tête {{httpheader("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 {{httpheader("Access-Control-Allow-Origin")}}), l'image sera corrompue et son utilisation sera restreinte.</dd> - </dl> - Lorsque cet attribut est absent, la ressource est récupérée sans requête <em>CORS</em> (c'est-à-dire sans envoyer l'en-tête HTTP {{httpheader("origin")}}) ce qui empêche de l'utiliser dans un {{HTMLElement('canvas')}} sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme <code><strong>anonymous</strong></code>. Voir la page <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">réglage des attributs CORS</a> pour plus d'informations.</dd> - <dt>{{htmlattrdef("decoding")}}</dt> - <dd> - <p>Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :</p> - </dd> - <dd> - <dl> - <dt><code>sync</code></dt> - <dd>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.</dd> - <dt><code>async</code></dt> - <dd>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.</dd> - <dt><code>auto</code></dt> - <dd>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.</dd> - </dl> - </dd> - <dt>{{htmlattrdef("height")}}</dt> - <dd>La hauteur intrinsèque de l'image exprimée en pixels (en {{HTMLVersionInline(4)}}, cette valeur pouvait être exprimée en pourcentages).</dd> - <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt> - <dd>Cet attribut indique l'importance relative de la ressource. Les indicateurs de priorité sont exprimés avec les valeurs suivantes :</dd> - <dd> - <p><code>auto</code> : aucune préférence particulière, le navigateur peut utiliser sa propre heuristique afin de décider la priorité de l'image.</p> - - <p><code>high</code> : cette valeur indique au navigateur que l'image a une priorité élevée.</p> - - <p><code>low</code> : cette valeur indique au navigateur que l'image a une priorité faible.</p> - </dd> - <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> - <dd>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 <code>naturalWidth</code>/<code>naturalHeight</code> sur de telles images renverrait les valeurs de cet attribut.. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a>.</dd> - <dt>{{htmlattrdef("ismap")}}</dt> - <dd>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. - <div class="note"> - <p><strong>Note : </strong>Cet attribut est uniquement autorisé si l'élément <code><img></code> descend d'un élément {{htmlelement("a")}} dont l'attribut {{htmlattrxref("href","a")}} est valide.</p> - </div> - </dd> -</dl> +<p>{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}</p> -<dl> - <dt>{{htmlattrdef("loading")}}</dt> - <dd> - <p>Indique comment le navigateur doit charger l'image :</p> - - <ul> - <li><code>eager</code> : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).</li> - <li><code>lazy</code> : 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.</li> - </ul> - </dd> -</dl> +<div class="notecard note"> + <p><b>Astuce :</b></p> + <p>Voir le <a href="/fr/docs/Web/Media/Formats/Image_types">Guide des types et formats de fichiers image</a> 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.).</p> +</div> + +<h2 id="image_loading_errors">Erreurs de chargement des images</h2> + +<p>Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement <a href="/fr/docs/Web/HTML/Global_attributes#attr-onerror"><code>onerror</code></a> a été paramétré afin d'écouter l'événement <a href="/fr/docs/Web/Reference/Events/error">error</a>, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :</p> + +<ul> + <li>L'attribut <a href="#attr-src"><code>src</code></a> est vide (<code>""</code>) ou vaut <code>null</code>.</li> + <li>L'<a href="/fr/docs/Glossary/URL">URL</a> indiquée dans l'attribut <code>src</code> est la même URL que celle de la page sur laquelle se trouve l'utilisateur.</li> + <li>L'image indiquée est corrompue et ne peut pas être chargée.</li> + <li>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 <code><img></code>.</li> + <li>Le format de l'image n'est pas pris en charge par l'agent utilisateur.</li> +</ul> + +<h2 id="attributes">Attributs</h2> + +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p> <dl> - <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> - <dd>Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource : - <ul> - <li><code>no-referrer</code> : l'en-tête HTTP {{httpheader("Referer")}} ne sera pas envoyé.</li> - <li><code>no-referrer-when-downgrade</code> : aucun en-tête HTTP {{httpheader("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.</li> - <li><code>origin</code> : l'en-tête HTTP {{httpheader("Referer")}} contiendra le schém, l'hôte et le port de la page d'origine.</li> - <li><code>origin-when-cross-origin</code> : 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.</li> - <li><code>unsafe-url</code> : l'en-tête HTTP {{httpheader("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.</li> - </ul> - </dd> - <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt> - <dd>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 (<em>source size</em>) se compose : - <ol> - <li>D'une condition sur le média (qui doit être absente pour le dernier élément de la liste).</li> - <li>D'une valeur</li> - </ol> - - <p>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 <code>srcset</code> lorsque ces sources sont décrites avec un descripteur de largeur ('<code>w</code>'). 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 <code>srcset</code> est absent ou ne contient aucune valeur qui soit un descripteur de largeur, l'attribut <code>sizes</code> n'aura aucun effet.</p> - </dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>L'URL de l'image. Cet attribut est obligatoire pour l'élément <code><img></code>. Pour les navigateurs qui prennent en charge <code>srcset</code>, <code>src</code> est considéré comme une image candidate dont la densité de pixel vaut <code>1x</code> si aucune autre image avec cette densité n'est définie via <code>srcset</code> ou si <code>srcset</code> contient des descripteurs '<code>w</code>'.</dd> - <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt> - <dd>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 : - <ol> - <li>D'une URL vers une image,</li> - <li>Éventuellement d'un espace suivi : - <ul> - <li>D'un descripteur de largeur ou un entier positif directement suivi par '<code>w</code>'. Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut <code>sizes</code> afin de calculer la densité de pixel réelle.</li> - <li>D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par '<code>x</code>'.</li> - </ul> - </li> - </ol> - - <p>Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut <code>1x</code>.</p> - - <p>Au sein d'un même attribut <code>srcset</code>, 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 '<code>2x</code>').</p> - - <p>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.</p> - </dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>La largeur intrinsèque de l'image, exprimée en pixels. En {{HTMLVersionInline(4)}}, la valeur pouvait être exprimée en pourcentages ou en pixels. Avec {{HTMLVersionInline(5)}}, seules les valeurs exprimées en pixels sont acceptées.</dd> - <dt>{{htmlattrdef("usemap")}}</dt> - <dd>Le fragment d'URL (commençant avec #) d'une <a href="/fr/docs/Web/HTML/Element/map">carte d'images</a> associée à cet élément. - <div class="note"> - <p><strong>Note :</strong> Cet attribut ne peut pas être utilisé si l'élément <code><img></code> est un descendant d'un élément {{htmlelement("a")}} ou d'un élément {{HTMLElement("button")}}.</p> - </div> - </dd> + <dt><code id="attr-alt">alt</code></dt> + <dd>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). + <div class="notecard note"> + <p><b>Note :</b></p> + <p>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 :</p> + <ul> + <li>Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles)</li> + <li>L'utilisateur choisit de ne pas afficher les images (économie de bande passante, raisons de confidentialité).</li> + <li>L'image n'est pas valide ou le <a href="#supported_image_formats">type n'est pas pris en charge</a>.</li> + </ul> + + <p>Dans ces cas, le navigateur peut remplacer l'image par le texte de l'attribut <code>alt</code> de l'élément. Pour ces raisons et d'autres, fournissez une valeur utile pour <code>alt</code> dans la mesure du possible.</p> + </div> + + <p>Omettre complètement <code>alt</code> 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 (<code>alt=""</code>) indique que cette image n'est <em>pas</em> 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 <a href="/fr/docs/Glossary/Rendering_engine">rendu</a>. Les navigateurs visuels masqueront également l'icône d'image brisée si le <code>alt</code> est vide et que l'image n'a pas réussi à s'afficher.</p> + + <p>Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet.</p> + </dd> + <dt><code id="attr-crossorigin">crossorigin</code></dt> + <dd> + <p>Indique si la récupération de l'image doit être effectuée à l'aide d'une requête <a href="/fr/docs/Glossary/CORS">CORS</a>. Les données d'image d'une <a href="/fr/docs/Web/HTML/CORS_enabled_image">image compatible avec le système CORS</a> renvoyées par une requête CORS peuvent être réutilisées dans l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans être marquées « <a href="/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_tainted_canvas">corrompu</a> ».</p> + + <p>Si l'attribut <code>crossorigin</code> <em>n'est pas</em> spécifié, une requête non-CORS est envoyée (sans l'en-tête de requête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>), 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 <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>.</p> + + <p>Si l'attribut <code>crossorigin</code> <em>est</em> spécifié, alors une requête CORS est envoyée (avec l'en-tête de requête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) ; 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 <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> ou en n'incluant pas l'origine du site dans l'en-tête de réponse <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> qu'il envoie), le navigateur bloque le chargement de l'image et enregistre une erreur CORS dans la console devtools.</p> + + <p>Valeurs autorisées :</p> + + <dl> + <dt><code>anonymous</code></dt> + <dd>Une requête entre deux origines est effectuée (avec l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) 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 <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), l'image sera corrompue et son utilisation sera restreinte.</dd> + <dt><code>use-credentials</code></dt> + <dd>Une requête entre deux origines est effectuée (avec l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) 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 <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), l'image sera corrompue et son utilisation sera restreinte.</dd> + </dl> + Lorsque cet attribut est absent, la ressource est récupérée sans requête <em>CORS</em> (c'est-à-dire sans envoyer l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>origin</code></a>) ce qui empêche de l'utiliser dans un <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme <code><strong>anonymous</strong></code>. Voir la page <a href="/fr/docs/Web/HTML/Attributes/crossorigin">réglage des attributs CORS</a> pour plus d'informations.</dd> + <dt><code id="attr-decoding">decoding</code></dt> + <dd> + <p>Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :</p> + <dl> + <dt><code>sync</code></dt> + <dd>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.</dd> + <dt><code>async</code></dt> + <dd>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.</dd> + <dt><code>auto</code></dt> + <dd>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.</dd> + </dl> + </dd> + <dt><code id="attr-height">height</code></dt> + <dd>La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité.</dd> + <dt><code id="attr-intrinsicsize">intrinsicsize</code> {{deprecated_inline}}</dt> + <dd>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 <code>naturalWidth</code>/<code>naturalHeight</code> sur de telles images renverrait les valeurs de cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a>.</dd> + <dt><code id="attr-ismap">ismap</code></dt> + <dd>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. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est uniquement autorisé si l'élément <code><img></code> descend d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a> est valide.</p> + </div> + </dd> + <dt><code id="attr-loading">loading</code> {{experimental_inline}}</dt> + <dd>Indique comment le navigateur doit charger l'image : + <ul> + <li><code>eager</code> : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).</li> + <li><code>lazy</code> : 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. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>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.</p> + </div> + </li> + </ul> + </dd> + <dt><code id="attr-referrerpolicy">referrerpolicy</code> {{experimental_inline}}</dt> + <dd>Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource : + <ul> + <li><code>no-referrer</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> ne sera pas envoyé.</li> + <li><code>no-referrer-when-downgrade</code> : aucun en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> n'est envoyé lorsqu'on navigue vers une origine sans <a href="/fr/docs/Glossary/https">HTTPS</a>. Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie.</li> + <li><code>origin</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> contiendra le schéma, l'<a href="/fr/docs/Glossary/Host">hôte</a> et le <a href="/fr/docs/Glossary/Port">port</a> de la page d'origine.</li> + <li><code>origin-when-cross-origin</code> : 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é.</li> + <li><code>unsafe-url</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> 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.</li> + </ul> + </dd> + <dt><code id="attr-sizes">sizes</code></dt> + <dd>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 : + <ol> + <li>D'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#syntax">condition sur le média</a>. Qui doit être absente pour le dernier élément de la liste.</li> + <li>Une valeur de taille de la source.</li> + </ol> + + <p>Les conditions de média décrivent les propriétés de la <em>fenêtre de visualisation</em> (ou « viewport »), et non de l'<em>image</em>. Par exemple, <code>(max-height : 500px) 1000px</code> propose d'utiliser une source de 1000px de largeur, si la <em>fenêtre de visualisation</em> n'est pas supérieure à 500px.</p> + + <p>Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. <a href="/fr/docs/Glossary/User_agent">Les agents utilisateurs</a> utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut <code>srcset</code>, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (<code>w</code>). La taille de la source sélectionnée affecte la <a href="/fr/docs/Glossary/Intrinsic_size">taille intrinsèque</a> de l'image (la taille d'affichage de l'image si aucun style <a href="/fr/docs/Glossary/CSS">CSS</a> n'est appliqué). Si l'attribut <code>srcset</code> est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut <code>sizes</code> n'a aucun effet.</p> + </dd> + <dt><code id="attr-src">src</code></dt> + <dd>L'<a href="/fr/docs/Glossary/URL">URL</a> de l'image. Cet attribut est obligatoire pour l'élément <code><img></code>. Pour les <a href="/fr/docs/Glossary/Browser">navigateurs</a> qui prennent en charge <code>srcset</code>, <code>src</code> est considéré comme une image candidate dont la densité de pixel vaut <code>1x</code> si aucune autre image avec cette densité n'est définie via <code>srcset</code> ou si <code>srcset</code> contient des descripteurs « <code>w</code> ».</dd> + <dt><code id="attr-srcset">srcset</code>*</dt> + <dd>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 : + <ol> + <li>D'une <a href="/fr/docs/Glossary/URL">URL</a> vers une image,</li> + <li>Éventuellement d'un espace suivi : + <ul> + <li>D'un descripteur de largeur ou un entier positif directement suivi par « <code>w</code> ». Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut <code>sizes</code> afin de calculer la densité de pixel réelle.</li> + <li>D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par « <code>x</code> ».</li> + </ul> + </li> + </ol> + + <p>Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut <code>1x</code>.</p> + + <p>Au sein d'un même attribut <code>srcset</code>, 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 « <code>2x</code> »).</p> + + <p>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 <a href="/fr/docs/Glossary/Bandwidth">bande passante</a>. Voir notre <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Tutoriel sur les images responsives</a> pour un exemple.</p> + </dd> + <dt><code id="attr-width">width</code></dt> + <dd>La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité.</dd> + <dt><code id="attr-usemap">usemap</code></dt> + <dd>Le fragment d'URL (commençant avec #) d'une <a href="/fr/docs/Web/HTML/Element/map">carte d'images</a> associée à cet élément. + <div class="note"> + <p><b>Note :</b></p> + <p>Cet attribut ne peut pas être utilisé si l'élément <code><img></code> est un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ou d'un élément <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>.</p> + </div> + </dd> </dl> -<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> +<h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt>{{htmlattrdef("align")}}</dt> - <dd>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS {{cssxref('float')}} et/ou {{cssxref('vertical-align')}} voire la propriété {{cssxref("object-position")}} qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</dd> - <dd> - <dl> - <dt><code>top</code></dt> - <dd>Équivalent à <code style="white-space: nowrap;">vertical-align: top;</code> ou à <code style="white-space: nowrap;">vertical-align: text-top;</code></dd> - <dt><code>middle</code></dt> - <dd>Équivalent à <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline;</code></dd> - <dt><code>bottom</code></dt> - <dd>La valeur utilisée par défaut. Équivalent à <code style="white-space: nowrap;">vertical-align: unset;</code> ou à <code style="white-space: nowrap;">vertical-align: initial;</code></dd> - <dt><code>left</code></dt> - <dd>Équivalent à <code style="white-space: nowrap;">float: left;</code></dd> - <dt><code>right</code></dt> - <dd>Équivalent à <code style="white-space: nowrap;">float: right;</code></dd> - </dl> - </dd> - <dt>{{htmlattrdef("border")}}</dt> - <dd>La largeur de la bordure qui entoure l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('border')}}.</dd> - <dt>{{htmlattrdef("hspace")}}</dt> - <dd>Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('margin')}}.</dd> - <dt>{{htmlattrdef("longdesc")}}</dt> - <dd>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant ({{htmlattrxref("id")}}) d'un élément. - <div class="note"> - <p><strong>Note :</strong> Cet attribut est obsolète depuis <a href="https://www.w3.org/TR/html50/obsolete.html#dom-img-longdesc">HTML 5.0</a>. Il est également mentionné dans les dernières versions W3C <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a> mais a été retiré du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">standard WHATWG</a>.</p> - - <p>Les auteurs ne devraient plus utiliser cet attribut mais employer des alternatives WAI-ARIA comme <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> - </div> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Un nom à donner à cet élément. Cet attribut est pris en charge en {{HTMLVersionInline(4)}} uniquement à des fins de rétrocompatibilité. Il faut utiliser l'attribut <code>id</code> à la place.</dd> - <dt>{{htmlattrdef("vspace")}}</dt> - <dd>Le nombre de pixels blancs à insérer en dessous et au dessus de l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('margin')}}.</dd> + <dt><code id="attr-align">align</code> {{deprecated_inline}}</dt> + <dd>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS <a href="/fr/docs/Web/CSS/float"><code>float</code></a> et/ou <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> voire la propriété <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</dd> + <dd> + <dl> + <dt><code>top</code></dt> + <dd>Équivalent à <code>vertical-align: top;</code> ou à <code>vertical-align: text-top;</code></dd> + <dt><code>middle</code></dt> + <dd>Équivalent à <code>vertical-align: -moz-middle-with-baseline;</code></dd> + <dt><code>bottom</code></dt> + <dd>La valeur utilisée par défaut. Équivalent à <code>vertical-align: unset;</code> ou à <code>vertical-align: initial;</code></dd> + <dt><code>left</code></dt> + <dd>Équivalent à <code>float: left;</code></dd> + <dt><code>right</code></dt> + <dd>Équivalent à <code>float: right;</code></dd> + </dl> + </dd> + <dt><code id="attr-border">border</code> {{deprecated_inline}}</dt> + <dd>La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété <a href="/fr/docs/Glossary/CSS">CSS</a> <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</dd> + <dt><code id="attr-hspace">hspace</code> {{deprecated_inline}}</dt> + <dd>Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</dd> + <dt><code id="attr-longdesc">longdesc</code> {{deprecated_inline}}</dt> + <dd>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) d'un élément. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est mentionné dans la dernière version du <a href="/fr/docs/Glossary/W3C">W3C</a>, <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, mais a été supprimé du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a>. Son avenir est incertain ; les auteurs devraient utiliser une alternative <a href="/fr/docs/Glossary/WAI">WAI</a>-<a href="/fr/docs/Glossary/ARIA">ARIA</a> telle que <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p> + </div> + </dd> + <dt><code id="attr-name">name</code> {{deprecated_inline}}</dt> + <dd>Un nom pour l'élément. Utilisez plutôt l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>.</dd> + <dt><code id="attr-vspace">vspace</code> {{deprecated_inline}}</dt> + <dd>Le nombre de pixels blancs à insérer en dessous et au-dessus de l'image. En HTML5, on privilégiera la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</dd> </dl> -<h2 id="Formats_dimage_pris_en_charge">Formats d'image pris en charge</h2> +<h2 id="styling_with_css">Mettre en forme avec CSS</h2> -<p>The HTML standard doesn't give a list of image formats that must be supported, so each {{glossary("user agent")}} supports a different set of formats.</p> +<p><code><img></code> est un <a href="/fr/docs/Web/CSS/Replaced_element">élément remplacé</a> ; il a une valeur <a href="/fr/docs/Web/CSS/display"><code>display</code></a> de <code>inline</code> 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 <code>inline-block</code>. Vous pouvez définir des propriétés comme <a href="/fr/docs/Web/CSS/border"><code>border</code></a>/<a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>/<a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/width"><code>width</code></a>, <a href="/fr/docs/Web/CSS/height"><code>height</code></a>, etc. sur une image.</p> -<p>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 <a href="/fr/docs/Web/Media/Formats/Types_des_images">guide à propos des formats d'image pris en charge par les navigateurs web</a> est disponible.</p> +<p><code><img></code> n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a><code> : baseline</code>, le bas de l'image sera placé sur la ligne de base du texte.</p> -<p>{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}</p> +<p>Vous pouvez utiliser la propriété <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> pour positionner l'image dans la boîte de l'élément, et la propriété <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a> 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).</p> -<h2 id="Interactions_avec_CSS">Interactions avec CSS</h2> +<p>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 <a href="/fr/docs/Glossary/SVG">SVG</a>, par exemple, n'ont pas de dimensions intrinsèques si leur élément <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a> n'a pas de <code>width</code> ou de <code>height</code> défini sur lui.</p> -<p>Pour CSS, <code><img></code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a>. Il n'a pas de ligne de base ; aussi, lorsque les images sont utilisées dans un contexte en ligne avec {{cssxref("vertical-align")}}<code>: baseline</code>, c'est le bas de l'image qui est placé sur la ligne de base du conteneur.</p> +<h2 id="examples">Exemples</h2> -<p>On peut utiliser la propriété {{cssxref("object-position")}} afin de positionner l'image dans la boîte de l'élément et la propriété {{cssxref("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).</p> +<h3 id="Alternative_text">Texte alternatif</h3> -<p>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).</p> +<p>L'exemple suivant intègre une image dans la page et inclut un texte alternatif pour l'accessibilité.</p> -<h2 id="Erreurs">Erreurs</h2> +<pre class="brush: html"><img src="favicon144.png" + alt="MDN logo"></pre> -<p>Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement {{htmlattrxref("onerror")}} a été paramétré afin d'écouter l'événement {{event("error")}}, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :</p> +<p>{{EmbedLiveSample('Alternative_text', '100%', '160')}}</p> -<ul> - <li>L'attribut {{htmlattrxref("src", "img")}} est vide ou vaut <code>null</code>.</li> - <li>L'URL indiquée dans l'attribut <code>src</code> est la même URL que celle de la page sur laquelle se trouve l'utilisateur.</li> - <li>L'image indiquée est corrompue et ne peut pas être chargée.</li> - <li>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 <code><img></code>.</li> - <li>Le format de l'image n'est pas pris en charge par l'agent utilisateur.</li> -</ul> +<h3 id="image_link">Lien image</h3> -<h2 id="Exemples">Exemples</h2> +<p>Cet exemple s'appuie sur le précédent, en montrant comment transformer l'image en lien. Pour ce faire, immergez la balise <code><img></code> à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></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.</p> -<h3 id="Définir_un_texte_alternatif">Définir un texte alternatif</h3> +<pre class="brush: html"><a href="https://developer.mozilla.org"> + <img src="favicon144.png" alt="Visitez le site du MDN"> +</a></pre> -<pre class="brush: html"><img src="https://developer.mozilla.org/static/img/favicon144.png" - alt="Le logo de MDN avec une silhouette de tête de dinosaure."> -</pre> +<p>{{EmbedLiveSample('image_link', '100%', '160')}}</p> -<p>{{ EmbedLiveSample('Définir_un_texte_alternatif', '100%', '160') }}</p> +<h3 id="using_the_srcset_attribute">Créer un lien avec une image</h3> -<h3 id="Créer_un_lien_avec_une_image">Créer un lien avec une image</h3> +<p>Dans cet exemple, nous incluons un attribut <code>srcset</code> avec une référence à une version haute résolution du logo ; celle-ci sera chargée à la place de l'image <code>src</code> sur les appareils haute résolution. L'image référencée dans l'attribut <code>src</code> est comptée comme un candidat <code>1x</code> dans <a href="/fr/docs/Glossary/User_agent">agent utilisateur</a> qui supporte <code>srcset</code>.</p> -<pre class="brush: html"><a href="https://developer.mozilla.org/"> - <img src="https://developer.mozilla.org/static/img/favicon144.png" - alt="Visiter le site MDN"> -</a></pre> +<pre class="brush: html"><img src="favicon72.png" + alt="Logo MDN" + srcset="favicon144.png 2x"></pre> -<p>{{ EmbedLiveSample('Créer_un_lien_avec_une_image', '100%', '160') }}</p> +<p>{{EmbedLiveSample('using_the_srcset_attribute', '100%', '160')}}</p> -<h3 id="Utiliser_les_attributs_srcset_et_sizes">Utiliser les attributs <code>srcset</code> et <code>sizes</code></h3> +<h3 id="using_the_srcset_and_sizes_attributes">Utiliser les attributs <code>srcset</code> et <code>sizes</code></h3> <p>L'attribut <code>src</code> est ignoré lorsque l'agent utilisateur prend en charge <code>srcset</code> et que ce dernier contient des descripteurs avec '<code>w</code>'. Dans cet exemple, lorsque la condition <code>(min-width: 600px)</code> est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera <code>50vw</code> (ce qui correspond à 50% de la largeur de la zone d'affichage (<em>viewport</em>)).</p> -<pre class="brush: html"> <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"></pre> +<pre class="brush: html"><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"></pre> -<p>{{EmbedLiveSample("Utiliser_les_attributs_srcset_et_sizes", "100%", 350)}}</p> +<p>{{EmbedLiveSample("using_the_srcset_and_sizes_attributes", "100%", 450)}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Pour observer l'effet du redimensionnement, vous devrez consulter <a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Pour observer l'effet du redimensionnement, vous devrez consulter <a href="/fr/docs/Web/HTML/Element/img/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p> </div> -<h2 id="Sécurité_et_vie_privée">Sécurité et vie privée</h2> +<h2 id="security_and_privacy_concerns">Sécurité et vie privée</h2> <p>Bien que les éléments <code><img></code> 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 <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">sur l'en-tête referer</a> pour plus d'informations et des façons de résoudre ces problèmes.</p> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="accessibility_concerns">Problèmes d'accessibilité</h2> -<h3 id="Rédiger_des_descriptions">Rédiger des descriptions</h3> +<h3 id="authoring_meaningful_alternate_descriptions">Création de descriptions alternatives significatives</h3> -<p>L'attribut <code>alt</code> 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 <code>alt</code> 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.</p> +<p>L'attribut <code>alt</code> 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 <code>alt</code> 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.</p> -<h4 id="Invalides">Invalides</h4> +<h4 id="dont">Ce qu'il ne faut pas faire</h4> -<pre class="brush: html example-bad"><img alt="image" src="manchot.jpg"> -</pre> +<pre class="brush: html example-bad"><img alt="image" src="manchot.jpg"></pre> -<h4 id="Valides">Valides</h4> +<h4 id="do">Ce qu'il faut faire</h4> -<pre class="brush: html example-good"><img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg"> -</pre> +<pre class="brush: html example-good"><img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg"></pre> -<p>Lorsque l'attribut <code>alt</code> 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.</p> +<p>Lorsque l'attribut <code>alt</code> 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.</p> <ul> - <li><em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/"> (en anglais)</a></li> - <li><em><a href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide - Axess Lab</a></em><a href="https://axesslab.com/alt-texts/"> (en anglais)</a></li> - <li><em><a href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction - Deque</a></em><a href="https://www.deque.com/blog/great-alt-text-introduction/"> (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html"><em>Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/"> (en anglais)</a></li> + <li><em><a href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></em><a href="https://axesslab.com/alt-texts/"> (en anglais)</a></li> + <li><em><a href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction - Deque</a></em><a href="https://www.deque.com/blog/great-alt-text-introduction/"> (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html"><em>Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> </ul> -<h3 id="Lattribut_title">L'attribut <code>title</code></h3> +<h3 id="the_title_attribute">L'attribut <code>title</code></h3> -<p>L'attribut {{HTMLattrxref("title")}} n'a pas vocation à remplacer l'attribut <code>alt</code>. De plus, on évitera d'utiliser la même valeur pour <code>alt</code> et <code>title</code> car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.</p> +<p>L'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> n'a pas vocation à remplacer l'attribut <code>alt</code>. De plus, on évitera d'utiliser la même valeur pour <code>alt</code> et <code>title</code>, car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.</p> -<p>L'attribut <code>title</code> ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fourni par <code>alt</code>. Si l'image nécessite une légende, on utilisera plutôt les éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}}.</p> +<p>L'attribut <code>title</code> ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fournie par <code>alt</code>. Si l'image nécessite une légende, on utilisera plutôt les éléments <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a> et <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>.</p> -<p>La valeur de l'attribut <code>title</code> 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 <code>title</code> 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.</p> +<p>La valeur de l'attribut <code>title</code> 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 <code>title</code> 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.</p> <ul> - <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/"><em>Utiliser l'attribut HTML <code>title</code> - The Paciello Group</em> (en anglais)</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/"><em>Utiliser l'attribut HTML <code>title</code> - The Paciello Group</em> (en anglais)</a></li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="technical_summary">Résumé technique</h2> <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>. Si l'élément possède un attribut {{htmlattrxref("usemap", "img")}}, c'est également un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balise</th> - <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du contenu intégré.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLImageElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>. Si l'élément possède un attribut <a href="#attr-usemap"><code>usemap</code></a>, c'est également un <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td> + <ul> + <li>avec un attribut <code>alt</code> non vide ou sans attribut <code>alt</code> : <code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></code></li> + <li>avec un attribut <code>alt</code> vide : <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td> + <ul> + <li>avec un attribut <code>alt</code> non vide : + <ul> + <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> + <li><a href="https://w3c.github.io/aria/#link">link</a></li> + <li><a href="https://w3c.github.io/aria/#menuitem">menuitem</a></li> + <li><a href="https://w3c.github.io/aria/#menuitemcheckbox">menuitemcheckbox</a></li> + <li><a href="https://w3c.github.io/aria/#menuitemradio">menuitemradio</a></li> + <li><a href="https://w3c.github.io/aria/#option">option</a></li> + <li><a href="https://w3c.github.io/aria/#progressbar">progressbar</a></li> + <li><a href="https://w3c.github.io/aria/#scrollbar">scrollbar</a></li> + <li><a href="https://w3c.github.io/aria/#separator">separator</a></li> + <li><a href="https://w3c.github.io/aria/#slider">slider</a></li> + <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></code></li> + <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></code></li> + <li><a href="https://w3c.github.io/aria/#treeitem">treeitem</a></li> + </ul> + </li> + <li>avec un attribut <code>alt</code> vide, <a href="https://w3c.github.io/aria/#none">none</a> ou <a href="https://w3c.github.io/aria/#presentation">presentation</a></li> + <li>sans attribut <code>alt</code>, aucun <code>role</code> autorisé</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Ajout de l'attribut <code>referrerpolicy</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '<img>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.img")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Les images <em>responsive</em></a></li> - <li>{{HTMLElement("picture")}}</li> - <li>{{HTMLElement("object")}}</li> - <li>{{HTMLElement("embed")}}</li> - <li>Les propriétés CSS relatives aux images : - <ul> - <li>{{cssxref("object-fit")}},</li> - <li>{{cssxref("object-position")}},</li> - <li>{{cssxref("image-orientation")}},</li> - <li>{{cssxref("image-rendering")}},</li> - <li>{{cssxref("image-resolution")}}.</li> - </ul> - </li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li> + <li><a href="/fr/docs/Web/Media/Formats/Image_types">Guide des types et formats de fichiers image</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images responsives</a></li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a> et <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a></li> + <li>Autres propriétés CSS relatives aux images : <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a>, <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a>, <a href="/fr/docs/Web/CSS/image-orientation"><code>image-orientation</code></a>, <a href="/fr/docs/Web/CSS/Image-rendering"><code>image-rendering</code></a> et <a href="/fr/docs/Web/CSS/image-resolution"><code>image-resolution</code></a>.</li> </ul> |
