From 1feae14e455488e46a8bbf593ad8f56b9096b724 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sat, 19 Mar 2022 15:28:27 +0100 Subject: Fixes #3885 - Removes {{page}} from Web/HTML (fr) (#3966) * img element * Update date time vs en-US / rm page and other xref macros * Datetime-local update + typofix for date * input email to parity vs en-US / rm macros * input month parity vs en-US * fix sidebar month * number parity vs en-US / typo month * track - parity en-us / rm macros * password - parity vs en-us and macro removal / typos on number * input range vs en-US * input search vs en-US * input tel * input week * input url * fix flaws input week * input time * fix frontmatter case * fix flaws * Typo and link fixes/nitpicking part 1 * Various fixes/nitpicking part 2, add fr images Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com> --- files/fr/web/html/element/img/index.md | 463 +++++++++------------ files/fr/web/html/element/input/date/index.md | 395 +++++++++--------- .../web/html/element/input/datetime-local/index.md | 346 +++++++-------- .../email/adresse-electronique-mauvais-motif.png | Bin 0 -> 3859 bytes files/fr/web/html/element/input/email/index.md | 288 +++++++------ .../saisir-une-adresse-electronique-valide.png | Bin 0 -> 2367 bytes .../html/element/input/month/champ-mois-requis.png | Bin 0 -> 5208 bytes files/fr/web/html/element/input/month/index.md | 243 +++++------ files/fr/web/html/element/input/number/index.md | 287 ++++++------- files/fr/web/html/element/input/password/index.md | 207 +++++---- files/fr/web/html/element/input/range/index.md | 426 +++++++++++-------- files/fr/web/html/element/input/search/index.md | 285 +++++++------ .../input/search/message-requis-firefox.png | Bin 0 -> 3766 bytes files/fr/web/html/element/input/tel/index.md | 286 ++++++------- files/fr/web/html/element/input/time/index.md | 323 +++++++------- files/fr/web/html/element/input/url/index.md | 342 ++++++++------- files/fr/web/html/element/input/week/index.md | 228 +++++----- .../week/validation-controle-type-week-chrome.png | Bin 0 -> 5664 bytes files/fr/web/html/element/track/index.md | 171 ++++---- 19 files changed, 2115 insertions(+), 2175 deletions(-) create mode 100644 files/fr/web/html/element/input/email/adresse-electronique-mauvais-motif.png create mode 100644 files/fr/web/html/element/input/email/saisir-une-adresse-electronique-valide.png create mode 100644 files/fr/web/html/element/input/month/champ-mois-requis.png create mode 100644 files/fr/web/html/element/input/search/message-requis-firefox.png create mode 100644 files/fr/web/html/element/input/week/validation-controle-type-week-chrome.png diff --git a/files/fr/web/html/element/img/index.md b/files/fr/web/html/element/img/index.md index 5e52eeefc8..be4dd243dd 100644 --- a/files/fr/web/html/element/img/index.md +++ b/files/fr/web/html/element/img/index.md @@ -1,312 +1,319 @@ --- title: ' : 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 --- {{HTMLRef}} -L'élément HTML **``** intègre une image dans le document. +L'élément [HTML](/fr/docs/Web/HTML) **``** permet d'intégrer une image dans un document. {{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}} -Dans l'exemple qui précède, on utilise l'élément `` simplement. +L'exemple qui précède illustre l'utilisation de l'élément `` : -- 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. +- L'attribut `src` est **obligatoire**, et contient le chemin vers l'image qu'on veut intégrer. +- L'attribut `alt` contient une description textuelle de l'image, ce qui n'est pas obligatoire mais **extrêmement utile** pour l'accessibilité. En effet, les outils de lecture d'écran utilisent cette description pour la lire afin que les personnes sachent ce que l'image représente. Ce texte alternatif sera également affiché sur la page si l'image ne peut pas être chargée (par exemple s'il y a des erreurs réseau, du blocage de contenu ou un lien périmé). -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 : +Il existe de nombreux autres attributs : -- [Referrer](/fr/docs/Web/HTTP/Headers/Referrer-Policy)/[CORS](/fr/docs/Glossary/CORS) contrôle pour la sécurité et la confidentialité : voir [`crossorigin`](#attr-crossorigin) et [`referrerpolicy`](#attr-referrerpolicy). -- [`width`](#attr-width) et [`height`](#attr-height) 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. -- Des indications d'images adaptatives avec [`sizes`](#attr-sizes) et [`srcset`](#attr-srcset). (voir aussi l'élément [``](/fr/docs/Web/HTML/Element/picture) et notre [Tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)). +- Le contrôle du [référent](/fr/docs/Web/HTTP/Headers/Referrer-Policy) et de la politique de gestion des ressources d'origines multiples ([CORS](/fr/docs/Glossary/CORS)) avec les attributs `crossorigin` et `referrerpolicy`. +- `width` et `height` qui permettent de définir la taille intrinsèque de l'image, lui permettant ainsi de prendre l'espace nécessaire avant son chargement (évitant ainsi d'avoir des décalages indésirables lors du chargement de la page). +- Des indications responsives avec `sizes` et `srcset` (voir également l'élément [``](/fr/docs/Web/HTML/Element/picture) et [le tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)). ## 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](/fr/docs/Glossary/User_agent) prend en charge un ensemble différent de formats. +Le standard HTML n'indique pas les formats d'image qui doivent être pris en charge, les agents utilisateurs peuvent prendre en charge différents formats. -{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}} +> **Note :** [Le guide sur les types de fichier et formats d'image](/fr/docs/Web/Media/Formats/Image_types) contient de nombreuses informations sur les formats d'image et leur prise en charge dans les navigateurs. La section qui suit n'est qu'un résumé ! -> **Note :** Voir le [Guide des types et formats de fichiers image](/fr/docs/Web/Media/Formats/Image_types) 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.). +Les formats d'image qu'on rencontre le plus fréquemment sur le Web sont : -## Erreurs de chargement des images +- [APNG (Animated Portable Network Graphics)](/fr/docs/Web/Media/Formats/Image_types#apng_animated_portable_network_graphics) pour les séquences animées avec une compression sans perte (le format GIF est moins performant) +- [AVIF (AV1 Image File Format)](/fr/docs/Web/Media/Formats/Image_types#avif) pour les images et les images animées avec de hautes performances +- [GIF (Graphics Interchange Format)](/fr/docs/Web/Media/Formats/Image_types#gif_graphics_interchange_format) pour les images et animations _simples_ +- [JPEG (Joint Photographic Expert Group image)](/fr/docs/Web/Media/Formats/Image_types#jpeg_joint_photographic_experts_group_image) pour une compression avec pertes d'images statiques, il s'agit du format le plus utilisé +- [PNG (Portable Network Graphics)](/fr/docs/Web/Media/Formats/Image_types#png_portable_network_graphics) pour une compression avec pertes d'images statiques, de meilleure qualité que le JPEG +- [SVG (Scalable Vector Graphics)](/fr/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics) pour un format d'image vectorielle (qui permet de dessiner une image précisément à différentes échelles) +- [WebP (Web Picture format)](/fr/docs/Web/Media/Formats/Image_types#webp) pour les images statiques et animées -Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement [`onerror`](/fr/docs/Web/HTML/Global_attributes#attr-onerror) a été paramétré afin d'écouter l'événement [error](/fr/docs/Web/Reference/Events/error), le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque : +Les formats comme [WebP](/fr/docs/Web/Media/Formats/Image_types#webp) et [AVIF](/fr/docs/Web/Media/Formats/Image_types#avif) sont recommandés, car avec de meilleures performances que PNG, JPEG, GIF tant pour les images animées que statiques. WebP dispose d'une large prise en charge tandis qu'AVIF n'est pas pris en charge par Safari. -- L'attribut [`src`](#attr-src) est vide (`""`) ou vaut `null`. -- L'[URL](/fr/docs/Glossary/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 ``. -- Le format de l'image n'est pas pris en charge par l'agent utilisateur. +SVG reste le format recommandé pour les images qui doivent être dessinées avec précision quelle que soit la taille. + +## Erreur de chargement d'une image + +Si une erreur se produit lors du chargement ou du rendu de l'image et qu'un gestionnaire d'évènement [`onerror`](/fr/docs/Web/HTML/Global_attributes#onerror) a été défini pour intercepter l'évènement [`error`](/fr/docs/Web/API/Element/error_event), le gestionnaire sera appelé. Cela peut arriver pour plusieurs raisons : + +- L'attribut `src` est vide (`""`) ou absent (`null` pour le DOM). +- L'URL utilisée pour l'attribut `src` est la même que celle de la page courante. +- L'image est corrompue et ne peut être chargée ainsi. +- Les métadonnées associées à l'image sont corrompues de telle façon qu'il est impossible de connaître ses dimensions et qu'aucune dimension n'a été fournie pour les attributs de l'élément ``. +- Le format de l'image n'est pas pris en charge par l'agent utilisateur (généralement le navigateur). ## Attributs -Cet élément inclut les [attributs globaux](/fr/docs/Web/HTML/Global_attributes). +On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément. - `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). + - : Définit une description textuelle alternative pour l'image. - > **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 : + > **Note :** Il se peut que les navigateurs n'affichent pas l'image, cela peut se produire si : > - > - 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](#supported_image_formats). + > - Le navigateur n'est pas doté d'une interface visuelle + > - La personne a configuré son navigateur pour ne pas afficher les images (afin d'économiser de la bande passante ou pour des raisons de vie privée) + > - L'image est invalide ou son format 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. + > Dans ces situations, le navigateur peut remplacer l'image avec le texte fourni par cet attribut. Aussi, il est grandement préférable de fournir une valeur utile pour `alt` dès que 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](/fr/docs/Glossary/Rendering_engine). 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. + L'absence totale d'attribut `alt` indique que l'image n'est pas importante pour le contenu et qu'aucun équivalent textuel n'est disponible. Utiliser la chaîne de caractères vide comme valeur pour cet attribut (`alt=""`) indique que cette image _n'est pas_ importante pour le contenu (par exemple une décoration ou un pixel de pistage), dans ce cas, les navigateurs non-visuels peuvent ne pas la traiter pour le rendu. Les navigateurs visuels masqueront l'icône de l'image cassée si `alt` est vide et que le chargement de l'image a échoué. - Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet. + Cet attribut est également utilisé pour copier/coller l'image vers du texte ou pour enregistrer un marque-page avec l'image associée. - `crossorigin` - - : Indique si la récupération de l'image doit être effectuée à l'aide d'une requête [CORS](/fr/docs/Glossary/CORS). Les données d'image d'une [image compatible avec le système CORS](/fr/docs/Web/HTML/CORS_enabled_image) renvoyées par une requête CORS peuvent être réutilisées dans l'élément [``](/fr/docs/Web/HTML/Element/canvas) sans être marquées « [corrompu](/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_tainted_canvas) ». + - : Indique que la récupération de l'image doit être effectuée avec une requête CORS. Les données provenant d'une [image chargée via une requête CORS](/fr/docs/Web/HTML/CORS_enabled_image) peuvent être réutilisées dans un élément [``](/fr/docs/Web/HTML/Element/canvas) sans que celui-ci soit considéré comme [corrompu (tainted)](/fr/docs/Web/HTML/CORS_enabled_image#canevas_corrompu_et_sécurité). - 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`](/fr/docs/Web/HTTP/Headers/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 [``](/fr/docs/Web/HTML/Element/canvas). + Si l'attribut `crossorigin` _n'est pas_ indiqué, une requête sans CORS sera effectuée (c'est-à-dire sans l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) et le navigateur marquera la page comme potentiellement corrompue, empêchant d'accéder aux données de l'image et empêchant son utilisation dans les éléments [``](/fr/docs/Web/HTML/Element/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`](/fr/docs/Web/HTTP/Headers/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`](/fr/docs/Web/HTTP/Headers/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`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) qu'il envoie), le navigateur bloque le chargement de l'image et enregistre une erreur CORS dans la console devtools. + Si l'attribut `crossorigin` _est présent_, une requête CORS est envoyée (avec l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) ; si le serveur ne gère pas l'accès depuis les origines tierces (c'est-à-dire qu'il n'envoie aucun en-tête de réponse [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) ou qu'il n'inclut pas l'origine du site dans l'en-tête `Access-Control-Allow-Origin`), le navigateur bloquera le chargement de l'image et affichera une erreur CORS dans la console de développement. - Valeurs autorisées : + Les valeurs autorisées pour cet attribut sont : - `anonymous` - - : Une requête entre deux origines est effectuée (avec l'en-tête [`Origin`](/fr/docs/Web/HTTP/Headers/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`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), l'image sera corrompue et son utilisation sera restreinte. + - : Une requête CORS est envoyée sans informations d'authentification (c'est-à-dire sans cookie, [certificat X.509](https://datatracker.ietf.org/doc/html/rfc5280), ou en-tête de requête [`Authorization`](/fr/docs/Web/HTTP/Headers/Authorization)). - `use-credentials` - - : Une requête entre deux origines est effectuée (avec l'en-tête [`Origin`](/fr/docs/Web/HTTP/Headers/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`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), l'image sera corrompue et son utilisation sera restreinte. + - : La requête CORS est envoyée avec les informations d'authentification (cookies, certificat X.509 et/ou en-tête `Authorization`). Si le serveur ne permet pas le partage des informations d'authentification avec le site d'origine (avec `Access-Control-Allow-Credentials: true` comme en-tête de réponse), le navigateur marque l'image comme potentiellement corrompue et restreint l'accès à ses données. - 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`](/fr/docs/Web/HTTP/Headers/Origin)) ce qui empêche de l'utiliser dans un [``](/fr/docs/Web/HTML/Element/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](/fr/docs/Web/HTML/Attributes/crossorigin) pour plus d'informations. + Si la valeur de l'attribut est invalide, les navigateurs considèrent que la valeur `anonymous` a été utilisée. Voir [les attributs de paramétrage du CORS](/fr/docs/Web/HTML/Attributes/crossorigin) pour plus d'informations. - `decoding` - - : Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont : + - : Fournit au navigateur une indication pour décoder l'image. Les valeurs autorisées 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. + - : L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à l'affichage 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. + - : La valeur par défaut qui indique qu'il n'y a pas de préférence. C'est le navigateur qui décide alors ce qui est le mieux. - `height` - - : La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité. -- `intrinsicsize` {{deprecated_inline}} - - : 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](https://github.com/ojanvafai/intrinsicsize-attribute), [exemples](https://googlechrome.github.io/samples/intrinsic-size/index.html). + - : La hauteur intrinsèque de l'image, exprimée en pixels. Cette valeur doit être un nombre entier, sans unité. + - `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. + - : Cet attribut booléen indique que l'image fait partie d'une [carte côté serveur](https://en.wikipedia.org/wiki/Image_map#Server-side). Dans ce cas, les coordonnées du clic sur l'image sont envoyés au serveur. - > **Note :** Cet attribut est uniquement autorisé si l'élément `` descend d'un élément [``](/fr/docs/Web/HTML/Element/a) dont l'attribut [`href`](/fr/docs/Web/HTML/Element/a#attr-href) est valide. + > **Note :** Cet attribut est uniquement autorisé lorsque l'élément `` est un descendant d'un élément [``](/fr/docs/Web/HTML/Element/a) disposant d'un attribut `href` valide. Cela fournit une alternative lorsque la navigation se fait sans dispositif de pointage. - `loading` {{experimental_inline}} - - : Indique comment le navigateur doit charger l'image : + - : Indique comment le navigateur devrait 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. + - `eager` + - : L'image est chargée immédiatement, que l'image soit située dans la zone d'affichage (viewport) visible ou non. Il s'agit de la valeur par défaut. + - `lazy` + - : Le chargement de l'image est retardé jusqu'à ce que celle-ci soit située à une certaine distance, définie par le navigateur, de la zone d'affichage. L'idée est d'éviter de consommer de la bande passante et des ressources réseaux avant d'être relativement certain que l'image est nécessaire. Pour la plupart des cas d'usage, cela permet d'améliorer les performances. - > **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. + > **Note :** Le retardement du chargement est uniquement activé lorsque JavaScript est activé dans le navigateur. Il s'agit d'une mesure pour limiter le pistage. En effet, si les scripts sont désactivés pour le navigateur et que le chargement retardé est actif, le pistage d'un utilisateur en fonction de sa position sur la page serait toujours possible (via des images placées à intervalle régulier sur la page). -- `referrerpolicy` {{experimental_inline}} +- `referrerpolicy` - - : Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource : + - : Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource : - - `no-referrer` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) ne sera pas envoyé. - - `no-referrer-when-downgrade` : aucun en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) n'est envoyé lorsqu'on navigue vers une origine sans [HTTPS](/fr/docs/Glossary/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`](/fr/docs/Web/HTTP/Headers/Referer) contiendra le schéma, l'[hôte](/fr/docs/Glossary/Host) et le [port](/fr/docs/Glossary/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`](/fr/docs/Web/HTTP/Headers/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. + - `no-referrer` + - : L'en-tête [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) n'est pas envoyé. + - `no-referrer-when-downgrade` + - : L'en-tête [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) ne sera pas envoyé aux origines dans TLS/HTTPS. + - `origin`: + - : Le référent envoyé sera limité à l'origine de la page référente, c'est-à-dire qu'il ne contiendra que le [schéma, l'hôte et le port](/fr/docs/Learn/Common_questions/What_is_a_URL). + - `origin-when-cross-origin` + - : Le référent envoyé aux autres origines sera limité au schéma, à l'hôte et au port. La navigation vers la même origine contiendra le chemin. + - `same-origin` + - : Un référent sera envoyé vers les mêmes origines mais les requêtes vers d'autres origines ne contiendront pas de référent. + - `strict-origin` + - : N'envoie l'origine du document comme référent que lorsque le niveau de sécurité du protocole reste le même (HTTPS→HTTPS) et pas lorsque la destination est moins sécurisée (HTTPS→HTTP). + - `strict-origin-when-cross-origin` (la valeur par défaut) + - : Envoie l'URL complète lors d'une requête vers la même origine, n'envoie que l'origine pour les requêtes vers d'autres origines si le niveau de sécurité du protocole reste le même (HTTPS→HTTPS), n'envoie aucun en-tête correspondant vers une destination moins sécurisée (HTTPS→HTTP). + - `unsafe-url` + - : Le référent inclut l'origine _et_ le chemin (mais pas le [fragment](/fr/docs/Web/API/HTMLAnchorElement/hash), [le mot de passe](/fr/docs/Web/API/HTMLAnchorElement/password) ou [le nom d'utilisateur](/fr/docs/Web/API/HTMLAnchorElement/username)). **Cette valeur n'est pas sécurisée**, car elle diffuse l'origine et les 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 : + - : Une ou plusieurs chaînes de caractères séparées par des virgules et qui indiquent un ensemble de tailles de source possible. Chaque taille de source consiste en : - 1. D'une [condition sur le média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#syntax). Qui doit être absente pour le dernier élément de la liste. - 2. Une valeur de taille de la source. + 1. Une [condition de média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries). Celle-ci doit être absente pour le dernier élément de la liste. + 2. Une valeur de taille de 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. + La condition de média décrit les propriétés de _la zone d'affichage_ et pas de _l'image_. Ainsi, `(max-height: 500px) 1000px` proposera d'utiliser une source de largeur 1000px, si _la zone d'affichage_ n'est pas plus haute que 500px. - Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. [Les agents utilisateurs](/fr/docs/Glossary/User_agent) 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](/fr/docs/Glossary/Intrinsic_size) de l'image (la taille d'affichage de l'image si aucun style [CSS](/fr/docs/Glossary/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. + Les valeurs pour les tailles de source indiquent la taille d'affichage souhaitée de l'image. Le navigateur utilise la taille de source courante correspondante pour sélectionner une des sources fournies par l'attribut `srcset` lorsque les sources y sont décrites avec un descripteur de largeur (`w`). La taille de source sélectionnée affecte la taille intrinsèque de l'image (c'est-à-dire la taille occupée à l'écran si aucun style CSS n'est appliqué). Si l'attribut `srcset` est absent ou qu'il ne contient pas de valeur avec un descripteur de largeur, l'attribut `sizes` aura aucun effet. - `src` - - : L'[URL](/fr/docs/Glossary/URL) de l'image. Cet attribut est obligatoire pour l'élément ``. Pour les [navigateurs](/fr/docs/Glossary/Browser) 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` ». + - : L'URL de l'image. Cet attribut est obligatoire. Pour les navigateurs qui prennent en charge `srcset`, l'image fourni par `src` est considérée comme une candidate avec un descripteur de densité de pixel à `1x`, sauf si une image avec un tel descripteur est déjà définie dans `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 : + - : Une ou plusieurs chaînes de caractères séparées par des virgules, qui indiquent des sources possibles pour l'image que le navigateur pourra utiliser. Chaque chaîne de caractères se compose : - 1. D'une [URL](/fr/docs/Glossary/URL) vers une image, - 2. Éventuellement d'un espace suivi : + 1. D'une URL vers l'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` ». + - D'un descripteur de largeur (un entier positif suivi par `w`). Le descripteur de largeur est divisé par la taille de source fournie par l'attribut `sizes` afin de calculer la densité de pixel effective. + - D'un descripteur de densité de pixel (un nombre décimal positif suivi par `x`). - Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut `1x`. + Si aucun descripteur n'est indiqué, la source se voit affecter un descripteur par défaut de `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` »). + Toute combinaison des deux types de descripteur sera invalide. De même, indiquer deux sources avec le même descripteur sera invalide. - 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](/fr/docs/Glossary/Bandwidth). Voir notre [Tutoriel sur les images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) pour un exemple. + L'agent utilisateur sélectionne une des sources disponibles comme il l'entend. Cette liberté permet de baser le choix sur d'autres facteurs comme les préférences de l'utilisateur ou les conditions réseau. Voir [le tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) pour un exemple. - `width` - - : La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité. + - : La largeur intrinsèque de l'image, exprimée en pixels. La valeur doit être un nombre entier sans unité. + - `usemap` - - : Le fragment d'URL (commençant avec #) d'une [carte d'images](/fr/docs/Web/HTML/Element/map) associée à cet élément. + - : L'URL partielle (commençant par `#`) d'une [carte d'image](/fr/docs/Web/HTML/Element/map) associée à l'élément. - > **Note :** Cet attribut ne peut pas être utilisé si l'élément `` est un descendant d'un élément [``](/fr/docs/Web/HTML/Element/a) ou d'un élément [`