diff options
| -rw-r--r-- | files/fr/mdn/structures/live_samples/index.html | 173 | ||||
| -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 | ||||
| -rw-r--r-- | files/fr/web/media/formats/image_types/index.html | 351 | ||||
| -rw-r--r-- | files/fr/web/svg/attribute/text-anchor/index.html | 149 |
8 files changed, 801 insertions, 480 deletions
diff --git a/files/fr/mdn/structures/live_samples/index.html b/files/fr/mdn/structures/live_samples/index.html new file mode 100644 index 0000000000..57f7054827 --- /dev/null +++ b/files/fr/mdn/structures/live_samples/index.html @@ -0,0 +1,173 @@ +--- +title: Exemples live +slug: MDN/Structures/Live_samples +tags: + - Guide + - Intermediate + - MDN Meta + - Structures +translation_of: MDN/Structures/Live_samples +original_slug: MDN/Structures/Exemples_live +--- +<div>{{MDNSidebar}}</div> + +<p>MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives <em>ne sont pas interactifs</em> ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.</p> + +<h2 id="how_does_the_live_sample_system_work">Comment le système d'exemples lives fonctionne-t-il ?</h2> + +<p>Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>. Un exemple live est composé de deux parties :</p> + +<ul> + <li>Un groupe qui comporte tout le code de l'exemple</li> + <li>La macro (crée l'<em>iframe</em> ou le lien qui) affiche le résultat du bloc de code</li> +</ul> + +<p>Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>).</p> + +<ul> + <li>Si l'ID appartient à un élément de bloc, le groupe comprend tous les blocs de code de l'élément de bloc englobant dont l'ID est utilisé.</li> + <li>Si l'ID appartient à une rubrique, le groupe inclut tous les blocs de code qui se trouvent après cette rubrique et avant la rubrique suivante du même niveau de rubrique. Notez que les blocs de code sous les sous-titres de la rubrique spécifiée sont tous utilisés ; si ce n'est pas l'effet que vous souhaitez, utilisez plutôt un ID sur un élément de bloc.</li> +</ul> + +<p>La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple <code>https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye</code>. La structure générale est <code>https://<em>url-of-page</em>_samples_/<em>group-id</em></code>, où <code>group-id</code> est l'ID de la rubrique ou du bloc où se trouve le code.</p> + +<p>Le cadre (ou la page) qui en résulte est protégé par un bac à sable, sécurisé, et peut techniquement faire tout ce qui fonctionne sur le Web. Bien sûr, d'un point de vue pratique, le code doit contribuer à l'intérêt de la page qui le contient ; les trucs aléatoires qui tournent sur MDN seront supprimés par la communauté des éditeurs.</p> + +<div class="note notecard"> + <p><b>Note :</b></p> + <p>Vous <strong>devez</strong> utiliser la macro pour présenter la sortie de l'échantillon en direct.</p> +</div> + +<p>Chaque bloc <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a> contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants.</p> + +<p>Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un.</p> + +<h3 id="live_sample_macros">Exemples de macros en direct</h3> + +<p>Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct :</p> + +<ul> + <li><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> embarque un échantillon vivant dans une page</li> + <li><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs">LiveSampleLink</a></code> crée un lien qui ouvre l'échantillon en direct dans une nouvelle page.</li> +</ul> + +<p>Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro <code>EmbedLiveSample</code> ou <code>LiveSampleLink</code> aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire.</p> + +<h4 id="embedlivesample_macro">La macro EmbedLiveSample</h4> + +<pre class="brush: js">\{{EmbedLiveSample(<em>block_ID</em>, <em>width</em>, <em>height</em>, <em>screenshot_URL</em>, <em>page_slug</em>)}}</pre> + +<dl> + <dt>block_ID</dt> + <dd>Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.</dd> + <dt>width</dt> + <dd>La largeur de l'<a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a> à créer, spécifiée en <code>px</code>. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous <em>devez</em> également spécifier le paramètre height.</dd> + <dt>height</dt> + <dd>La hauteur de l'<a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a> à créer, spécifiée en <code>px</code>. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous <em>devez</em> également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée.</dd> + <dt>screenshot_URL</dt> + <dd>L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés.</dd> + <dt>page_slug</dt> + <dd> + <p>Le slug de la page contenant l'échantillon ; ceci est facultatif, et s'il n'est pas fourni, l'échantillon est tiré de la même page sur laquelle la macro est utilisée.</p> + <div class="notecard warning"> + <b>Attention :</b> Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro <code><a href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro <code><a href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir <a href="https://github.com/mdn/yari/issues/2243">Le ticket Yari #2243</a>.) + </div> + </dd> +</dl> + +<h4 id="livesamplelink_macro">La macro LiveSampleLink</h4> + +<pre class="brush: js">\{{LiveSampleLink(<em>block_ID</em>, <em>link_text</em>)}}</pre> + +<dl> + <dt>block_ID</dt> + <dd>L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.</dd> + <dt>link_text</dt> + <dd>Une chaîne de caractères à utiliser comme texte du lien.</dd> +</dl> + +<h2 id="using_the_live_sample_system">Utilisation du système d'échantillonnage en direct</h2> + +<p>Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct.</p> + +<h3 id="turning_snippets_into_live_samples">Transformer des extraits en échantillons vivants</h3> + +<p>Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants.</p> + +<h4 id="prepare_the_code_samples">Préparer les échantillons de code</h4> + +<p>La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer.</p> + +<p>Chaque morceau de code doit se trouver dans un bloc <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a>, avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément <code><pre></code> de <code>brush:<em>language-type</em></code>, où <em>language-type</em> est le type de langage que le bloc contient, par exemple <code>html</code>, <code>css</code>, ou <code>js</code>.</p> + +<div class="note notecard"> + <p><b>Note :</b></p> + <p>Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif.</p> +</div> + +<p>Assurez-vous donc que les blocs <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a> de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir.</p> + +<h2 id="live_sample_demo">Démonstration en direct</h2> + +<p>Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez !</p> + +<p>Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a>. Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct.</p> + +<p>Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif.</p> + +<h3 id="html">HTML</h3> + +<p>Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message.</p> + +<pre class="brush: html"><p>Un exemple simple du système d'échantillonnage en direct en action.</p> +<div class="box"> + <div id="item">Bonjour à tous ! Bienvenue sur MDN</div> +</div></pre> + +<h3 id="css">CSS</h3> + +<p>Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient.</p> + +<pre class="brush: css">.box { + width: 200px; + border-radius: 6px; + padding: 20px; + background-color: #ffaabb; +} + +#item { + font-weight: bold; + text-align: center; + font-family: sans-serif; + font-size: 1.5em; +}</pre> + +<h3 id="javascript">JavaScript</h3> + +<p>Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué.</p> + +<pre class="brush: js">const el = document.getElementById('item'); +el.onclick = function() { + alert('Ohhh, arrête de m\'embêter !'); +}</pre> + +<h3 id="result">Résultat</h3> + +<p>Voici le résultat de l'exécution des blocs de code ci-dessus via <code>\{{EmbedLiveSample('live_sample_demo')}}</code> :</p> + +<p>{{EmbedLiveSample('live_sample_demo')}}</p> + +<p>Voici un lien qui résulte de l'appel de ces blocs de code via <code>\{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}</code>:</p> + +<p>{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}</p> + +<h2 id="conventions_regarding_live_samples">Conventions relatives aux échantillons vivants</h2> + +<dl> + <dt>Ordres des blocs de code</dt> + <dd>Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite.</dd> + <dt>Nomenclature des rubriques</dt> + <dd>Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi.</dd> + <dt>Utilisation d'un bloc « Résultat »</dt> + <dd>Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro <code>EmbedLiveSample</code> (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web).</dd> +</dl> 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> diff --git a/files/fr/web/media/formats/image_types/index.html b/files/fr/web/media/formats/image_types/index.html index 94d380ca0a..fba64531f0 100644 --- a/files/fr/web/media/formats/image_types/index.html +++ b/files/fr/web/media/formats/image_types/index.html @@ -5,12 +5,14 @@ tags: - APNG - BMP - Bitmap - - Diagrammes - - Fichier - - Graphiques + - Diagrams + - File + - File Types + - Filetype + - Graphics - Guide - ICO - - Icône + - Icons - Image - Images - JPEG @@ -19,21 +21,19 @@ tags: - PNG - Photos - SVG - - Types - - Types de fichier - WebP - gif - - Ícones + - icon translation_of: Web/Media/Formats/Image_types original_slug: Web/Media/Formats/Types_des_images --- <div>{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}</div> -<p><span class="seoSummary">Dans ce guide, nous aborderons les types de fichiers d'images généralement pris en charge par les navigateurs web, et nous vous donnerons des indications qui vous aideront à sélectionner les formats les plus appropriés pour l'imagerie de votre site.</span></p> +<p>Dans ce guide, nous aborderons les types de fichiers d'images généralement pris en charge par les navigateurs web, et nous vous donnerons des indications qui vous aideront à sélectionner les formats les plus appropriés pour l'imagerie de votre site.</p> -<h2 id="Types_de_fichiers_dimages_communs">Types de fichiers d'images communs</h2> +<h2 id="common_image_file_types">Types de fichiers d'images communs</h2> -<p>Il existe de nombreux formats de fichiers d'images dans le monde. Toutefois, ceux qui sont énumérés ci-dessous sont généralement reconnus comme utilisables sur le Web, bien que <strong>BMP ne soit généralement pas recommandé</strong> car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web.</p> +<p>Il existe de nombreux formats de fichiers d'images dans le monde. Toutefois, ceux qui sont énumérés ci-dessous sont généralement reconnus comme utilisables sur le Web, bien que <strong>BMP ne soit généralement pas recommandé</strong>, car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web.</p> <div id="table-of-image-file-types"> <table class="standard-table"> @@ -43,90 +43,126 @@ original_slug: Web/Media/Formats/Types_des_images <th scope="row">Format du fichier (en)</th> <th scope="col">Type de MIME</th> <th scope="col">Extention(s) du fichier</th> - <th scope="col">Compatibilité des navigateurs</th> + <th scope="col">Résumé</th> + <th scope="col">Prise en charge navigateur</th> </tr> </thead> <tbody> <tr> - <th scope="row">{{anch("APNG")}}</th> + <th scope="row"><a href="#apng">APNG</a></th> <th scope="row">Animated Portable Network Graphics</th> <td><code>image/apng</code></td> <td><code>.apng</code></td> - <td>Chrome, Edge, Firefox, Opera, Safari</td> - </tr> - <tr> - <th scope="row">{{anch("BMP")}}</th> - <th scope="row">Bitmap file</th> - <td><code>image/bmp</code></td> - <td><code>.bmp</code></td> + <td>Bon choix pour les animations sans perte de qualité. AVIF et WebP ont de meilleures performances mais une moins bonne couverture des navigateurs.</td> <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("GIF")}}</th> + <th scope="row"><a href="#avif">AVIF</a></th> + <th scope="row">AV1 Image File Format</th> + <td><code>image/avif</code></td> + <td><code>.avif</code></td> + <td>Un format avec de bonnes performances et sans licence commerciale qui peut être utilisé pour les images statiques comme animées. Il offre une meilleure compression que PNG et JPEG et une meilleure profondeur de couleur. Il est préférable d'utiliser des formats alternatifs via l'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> pour s'adapter aux différentes prises en charge des navigateurs.</td> + <td>Chrome, Edge, Firefox (fonctionnalités de base), Opera</td> + </tr> + <tr> + <th scope="row"><a href="#gif">GIF</a></th> <th scope="row">Graphics Interchange Format</th> <td><code>image/gif</code></td> <td><code>.gif</code></td> + <td>Un bon choix pour les images simples et les animations. On préfèrera toutefois PNG pour les images statiques sans pertes de compression et WebP, AVIF ou APNG pour les animations afin d'avoir de meilleures compressions.</td> <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("ICO")}}</th> - <th scope="row">Microsoft Icon</th> - <td><code>image/x-icon</code></td> - <td><code>.ico</code>, <code>.cur</code></td> - <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> - </tr> - <tr> - <th scope="row">{{anch("JPEG")}}</th> - <th scope="row">Joint Photographic Expert Group image</th> + <th scope="row"><a href="#jpeg">JPEG</a></th> + <th scope="row">Joint Photographic Expert Group</th> <td><code>image/jpeg</code></td> <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jfif</code>, <code>.pjpeg</code>, <code>.pjp</code></td> + <td>Un bon choix pour les images compressées avec pertes. C'est le format le plus populaire et parmi les mieux pris en charge. PNG sera préférable si on préfère une meilleure fidélité à l'image et WebP/AVIF permettront d'avoir de meilleurs taux de compression.</td> <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("PNG")}}</th> + <th scope="row"><a href="#png">PNG</a></th> <th scope="row">Portable Network Graphics</th> <td><code>image/png</code></td> <td><code>.png</code></td> + <td>PNG pourra être préféré à JPEG lorsqu'on a besoin d'une meilleure précision ou de transparence. WebP/AVIF permettront d'avoir de meilleurs taux de compression mais leur prise en charge navigateur est plus faible.</td> <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("SVG")}}</th> + <th scope="row"><a href="#svg">SVG</a></th> <th scope="row">Scalable Vector Graphics</th> <td><code>image/svg+xml</code></td> <td><code>.svg</code></td> + <td>Un format d'image vectoriel idéal pour les éléments d'interface utilisateur, les icônes ou diagrammes qui nécessitent de s'afficher précisément quelle que soit l'échelle.</td> <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> </tr> <tr> - <th scope="row">{{anch("TIFF")}}</th> - <th scope="row">Tagged Image File Format</th> - <td><code>image/tiff</code></td> - <td><code>.tif</code>, <code>.tiff</code></td> - <td>None built-in; add-ons required</td> - </tr> - <tr> - <th scope="row">{{anch("WebP")}}</th> - <th scope="row">Web Picture format</th> + <th scope="row"><a href="#webp">WebP</a></th> + <th scope="row">Web Picture</th> <td><code>image/webp</code></td> <td><code>.webp</code></td> + <td>Un excellent choix pour les images statiques ou animées. Les taux de compression de ce format sont meilleurs que pour PNG ou JPEG. Ce format prend également en charge de meilleures profondeurs pour les couleurs, les <i>frames</i> animées, la transparence, etc.</td> <td>Chrome, Edge, Firefox, Opera</td> </tr> </tbody> </table> +</div> -<p>L'abréviation de chaque format renvoie à une description plus longue du format, de ses capacités et à des informations détaillées sur la compatibilité des navigateurs ; y compris les versions qui ont introduit le support et les caractéristiques spéciales spécifiques qui ont pu être introduites ultérieurement.</p> +<p>Les formats moins récents comme PNG, JPEG, GIF possèdent de moins bonnes performances que des formats comme WebP et AVIF mais bénéficient d'une compatibilité navigateur plus large. Les formats plus récents gagnent en popularité du fait que la part des navigateurs incompatibles diminue.</p> </div> -<h2 id="Détails_sur_le_type_de_fichier_image">Détails sur le type de fichier image</h2> +<p>Le tableau qui suit indique les formats d'image qui peuvent également être utilisés sur le Web mais qui devraient être évités en raison de leur compatibilité faible ou de l'existence de meilleurs formats.</p> + +<div id="table-of-less-used-image-file-types"> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Abréviation</th> + <th scope="row">Format de fichier</th> + <th scope="col">Type MIME</th> + <th scope="col">Extension(s)</th> + <th scope="col">Prise en charge navigateur</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"><a href="#bmp">BMP</a></th> + <th scope="row">Bitmap</th> + <td><code>image/bmp</code></td> + <td><code>.bmp</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row"><a href="#ico">ICO</a></th> + <th scope="row">Microsoft Icon</th> + <td><code>image/x-icon</code></td> + <td><code>.ico</code>, <code>.cur</code></td> + <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td> + </tr> + <tr> + <th scope="row"><a href="#tiff">TIFF</a></th> + <th scope="row">Tagged Image File Format</th> + <td><code>image/tiff</code></td> + <td><code>.tif</code>, <code>.tiff</code></td> + <td>Aucune prise en charge native, addons nécessaires</td> + </tr> + </tbody> + </table> +</div> + +<p>L'abréviation de chaque format renvoie à une description plus longue du format, de ses capacités et à des informations détaillées sur la compatibilité des navigateurs ; y compris les versions qui ont introduit le support et les caractéristiques spéciales spécifiques qui ont pu être introduites ultérieurement.</p> + +<h2 id="image_file_type_details">Détails sur le type de fichier image</h2> <p>Les sections suivantes donnent un bref aperçu de chacun des types de fichiers d'images pris en charge par les navigateurs web.</p> -<p>Dans les tableaux ci-dessous, le terme <strong>bits par composante</strong> fait référence au nombre de bits utilisés pour représenter chaque composante de couleur. Par exemple, une profondeur de couleur RVB de 8 indique que chacune des composantes rouge, verte et bleue est représentée par une valeur de 8 bits. <strong>Profondeur de bit</strong>, d'autre part, est le nombre total de bits utilisés pour représenter chaque pixel en mémoire.</p> +<p>Dans les tableaux ci-dessous, le terme <strong>bits par composante</strong> fait référence au nombre de bits utilisés pour représenter chaque composante de couleur. Par exemple, une profondeur de couleur RVB de 8 indique que chacune des composantes rouge, verte et bleue est représentée par une valeur de 8 bits. <strong>La profondeur de bit</strong>, d'autre part, correspond au nombre total de bits utilisés pour représenter chaque pixel en mémoire.</p> -<h3 id="APNG_Animated_Portable_Network_Graphics"><a id="APNG" name="APNG">APNG</a> (Animated Portable Network Graphics)</h3> +<h3 id="apng">APNG (Animated Portable Network Graphics)</h3> -<p>L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le {{anch("PNG")}} pour ajouter le support des images animées. Conceptuellement similaire au format GIF animé qui est utilisé depuis des décennies, l'APNG est plus performant dans la mesure où il prend en charge une variété de {{interwiki("wikipedia", "color depth", "profondeur de couleur")}}, alors que le GIF animé ne supporte que le 8-bit {{interwiki("wikipedia", "indexed color", "couleur indexée")}}.</p> +<p>L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le <a href="#png">PNG</a> pour ajouter le support des images animées. Conceptuellement similaire au format GIF animé qui est utilisé depuis des décennies, l'APNG est plus performant dans la mesure où il prend en charge une variété de <a href="https://fr.wikipedia.org/wiki/Profondeur_de_couleur_(informatique)">profondeur de couleur</a>, alors que le GIF animé ne supporte que des <a href="https://en.wikipedia.org/wiki/Indexed_color">couleurs indexées</a> sur 8 bits.</p> -<p>L'APNG est idéal pour les animations de base qui n'ont pas besoin d'être synchronisées avec d'autres activités ou avec une bande son, comme les indicateurs de progrès, {{interwiki("wikipedia", "throbber", "indicateur d'activité")}}, et autres séquences animées. Par exemple, l'APNG est <a href="https://developer.apple.com/stickers/">l'un des formats pris en charge lors de la création d'autocollants animés</a> pour l'application iMessage d'Apple (et l'application Messages sur iOS). Ils sont également couramment utilisés pour les parties animées des interfaces utilisateur des navigateurs web.</p> +<p>L'APNG est idéal pour les animations de base qui n'ont pas besoin d'être synchronisées avec d'autres activités ou avec une bande son, comme les indicateurs de progrès, <a href="https://fr.wikipedia.org/wiki/Indicateur_d%27activit%C3%A9">indicateur d'activité</a>, et autres séquences animées. Par exemple, l'APNG est <a href="https://developer.apple.com/stickers/">l'un des formats pris en charge lors de la création d'autocollants animés</a> pour l'application iMessage d'Apple (et l'application Messages sur iOS). Ils sont également couramment utilisés pour les parties animées des interfaces utilisateur des navigateurs web.</p> <table class="standard-table"> <tbody> @@ -147,8 +183,8 @@ original_slug: Web/Media/Formats/Types_des_images <td>Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8</td> </tr> <tr> - <th scope="row">Dimentions maximum</th> - <td>2,147,483,647×2,147,483,647 pixels</td> + <th scope="row">Dimensions maximales</th> + <td>2 147 483 647×2 147 483 647 pixels</td> </tr> <tr> <th scope="row">Modes de couleur supportés</th> @@ -196,13 +232,92 @@ original_slug: Web/Media/Formats/Types_des_images <td>Sans perte</td> </tr> <tr> - <th scope="row">License</th> - <td>Gratuit et ouvert dans le cadre de la <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike license</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>) version 3.0 ou plus.</td> + <th scope="row">Licence</th> + <td>Gratuit et ouvert dans le cadre de la <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike license</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>) version 3.0 ou plus.</td> + </tr> + </tbody> +</table> + +<h3 id="avif">AVIF</h3> + +<p>AV1 Image File Format (AVIF) est un format open-source et sans licence commerciale qui encode <dfn>des flux de bits AV1 dans un conteneur High Efficiency Image File Format (HEIF).</dfn></p> + +<p><dfn>AV1 est un format d'encodage originellement conçu pour la transmission de vidéos sur Internet. Ce format bénéficie des avancées de la recherche sur l'encodage vidéo et peut bénéficier de la prise en charge matérielle des appareils. Un inconvénient est la différence de prérequis entre l'encodage vidéo / image.</dfn></p> + +<p>Ce format dispose :</p> + +<ul> + <li>D'une excellente compression avec pertes par rapport à JPG et PNG pour des résultats visuels similaires (les images AVIF avec pertes pèsent environ la moitié des images JPEG).</li> + <li>D'une meilleure compression que WebP — mediane à 50% par rapport à 30% de compression pour le même ensemble de fichiers JPG (source : <a href="https://www.ctrl.blog/entry/webp-avif-comparison.html">AVIF WebP Comparison</a> (CTRL Blog)).</li> + <li>D'une compression sans perte.</li> + <li>D'un stockage pour les animations/multi-images (similaire aux GIF aniimés mais avec une bien meilleure compression)</li> + <li>D'une prise en charge de la transparence avec un canal alpha.</li> + <li>Du <em>High Dynamic Range</em> (HDR) qui permet de stocker des images avec une plus grande largeur de contraste entre les zones les plus claires et les plus sombres.</li> + <li>D'un spectre de couleurs (<i>gamut</i>) élargi.</li> +</ul> + +<p>AVIF ne prend pas en charge l'affichage progressif et il faut donc que les fichiers soient complètement téléchargés avant de pouvoir être affichés. Cela a peu d'impact pour la plupart des fichiers AVIF qui sont plus légers que leurs équivalents JPEG ou PNG. En revanche, pour les fichiers plus volumineux, on devra considérer un format qui prend en charge le rendu progressif.</p> + +<p>La prise en charge navigateur n'étant pas aussi large que pour les autres formats, il est préférable d'utiliser l'élément HTML <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> pour fournir des images alternatives au format <a href="#jpeg">JPEG</a> ou <a href="#png">PNG</a>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Type MIME</th> + <td><code>image/avif</code></td> + </tr> + <tr> + <th scope="row">Extension</th> + <td><code>.avif</code></td> + </tr> + <tr> + <th scope="row">Spécification</th> + <td> + <p><a href="https://aomediacodec.github.io/av1-avif/">AV1 Image File Format (AVIF)</a></p> + </td> + </tr> + <tr> + <th scope="row">Compatibilité des navigateurs</th> + <td>Chrome 85, Opera 71 et Firefox (via <a href="/fr/docs/Mozilla/Firefox/Experimental_features#avif_av1_image_file_format_support">une préférence</a>). + <ul> + <li>Pour Firefox 77 et ultérieur : <code>image.avif.enable</code> doit être passée à <code>true</code>. Firefox implémente pour le moment une prise en charge simple d'AVIF. Les fonctionnalités plus avancées comme les images animées ou les espaces de couleurs sont en cours de développement (voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1682995">le bug 1682995</a>).</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Dimensions maximums </th> + <td>2 147 483 647×2 147 483 647 pixels</td> + </tr> + <tr> + <th scope="row">Modes de couleurs supportés</th> + <td> + <p>Voir <a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">AV1 Bitstream & Decoding Process Specification</a>, section 6.4.2 : Color config semantics.</p> + + <p>Pour résumer de façon non-exhaustive :</p> + + <ul> + <li>Modes de couleur : YUV444, YUV422, YUV420</li> + <li>Niveau de gris : YUV400</li> + <li>Bits : 8/10/12 bits</li> + <li>Prise en charge du canal alpha</li> + <li>Prise en charge des profils ICC</li> + <li>Prise en charge NCLX : sRGB, sRGB linéaire, Rec2020 linéaire, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3, etc.</li> + <li>Prise en charge des tuiles</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Compression</th> + <td>Avec ou sans perte.</td> + </tr> + <tr> + <th scope="row">Licence</th> + <td>Pas de licence commerciale. Informations disponibles sur <a href="https://aomedia.org/license/">https://aomedia.org/license/</a> .</td> </tr> </tbody> </table> -<h3 id="BMP_Bitmap_file"><a id="BMP" name="BMP">BMP</a> (Bitmap file)</h3> +<h3 id="bmp">BMP (Bitmap file)</h3> <p>Le type de fichier BMP <strong>(image Bitmap)</strong> est le plus répandu sur les ordinateurs Windows, et n'est généralement utilisé que dans des cas particuliers pour les applications et contenus web.</p> @@ -214,7 +329,7 @@ original_slug: Web/Media/Formats/Types_des_images <p>Bien que d'autres représentations de données soient définies dans la spécification, elles ne sont pas largement utilisées et sont souvent complètement inappliquées. Ces caractéristiques comprennent : la prise en charge de différentes profondeurs de bits, la couleur indexée, les canaux alpha et différents ordres de pixels (par défaut, BMP est écrit du coin inférieur gauche vers la droite et le haut, plutôt que du coin supérieur gauche vers la droite et le bas).</p> -<p>Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format {{anch("JPEG")}} ou {{anch("PNG")}} dans le fichier BMP.</p> +<p>Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format <a href="#jpeg">JPEG</a> ou <a href="#png">PNG</a> dans le fichier BMP.</p> <table class="standard-table"> <tbody> @@ -228,15 +343,15 @@ original_slug: Web/Media/Formats/Types_des_images </tr> <tr> <th scope="row">Spécification</th> - <td>Aucune spécification ; toutefois, Microsoft fournit une documentation générale sur le format à l'adresse <a href="https://docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage">docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage</a></td> + <td>Aucune spécification ; toutefois, Microsoft fournit une documentation générale sur le format à l'adresse <a href="https://docs.microsoft.com/fr/windows/desktop/gdi/bitmap-storage">docs.microsoft.com/fr/windows/desktop/gdi/bitmap-storage</a></td> </tr> <tr> <th scope="row">Compatibilité des navigateurs</th> <td>Toutes versions de Chrome, Edge, Firefox, Internet Explorer, Opera, et Safari</td> </tr> <tr> - <th scope="row">Dimentions maximum</th> - <td>Soit 32,767×32,767 ou 2,147,483,647×2,147,483,647 pixels, selon la version du format</td> + <th scope="row">Dimensions maximales</th> + <td>Soit 32 767×32 767 ou 2 147 483 647×2 147 483 647 pixels, selon la version du format</td> </tr> <tr> <th scope="row">Modes de couleur supportés</th> @@ -284,17 +399,17 @@ original_slug: Web/Media/Formats/Types_des_images <td>Plusieurs méthodes de compression sont prises en charge, notamment les algorithmes avec ou sans perte</td> </tr> <tr> - <th scope="row">License</th> + <th scope="row">Licence</th> <td>Couvert par la promesse de spécification ouverte de Microsoft ; bien que Microsoft détienne des brevets contre la BMP, elle a publié une promesse de ne pas faire valoir ses droits de brevet tant que des conditions spécifiques sont remplies. Il ne s'agit toutefois pas d'une licence. BMP est inclus dans le format Windows Metafile (<code>.wmf</code>).</td> </tr> </tbody> </table> -<h3 id="GIF_Graphics_Interchange_Format"><a id="GIF" name="GIF">GIF</a> (Graphics Interchange Format)</h3> +<h3 id="gif">GIF (Graphics Interchange Format)</h3> -<p>En 1987, le fournisseur de services en ligne CompuServe a introduit le <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise le {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) pour compresser sans perte des images couleur indexés sur 8 bits. Le GIF était l'un des deux premiers formats graphiques pris en charge par {{Glossary("HTML")}}, ainsi que {{anch("XBM")}}.</p> +<p>En 1987, le fournisseur de services en ligne CompuServe a introduit le <strong><a href="https://fr.wikipedia.org/wiki/Graphics_Interchange_Format">"GIF"</a></strong> (<strong>Graphics Interchange Format</strong>) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise l'algorithme <a href="https://fr.wikipedia.org/wiki/Lempel-Ziv-Welch">Lempel-Ziv-Welch (LZW)</a> pour compresser sans perte des images couleur indexés sur 8 bits. Le GIF était l'un des deux premiers formats graphiques pris en charge par <a href="/fr/docs/Glossary/HTML">HTML</a>, ainsi que <a href="#xbm">XBM</a>.</p> -<p>Chaque pixel d'un GIF est représenté par une seule valeur de 8 bits servant d'index dans une palette de couleurs de 24 bits (8 bits pour le rouge, le vert et le bleu). La longueur d'une table de couleurs est toujours une puissance de 2 (c'est-à-dire que chaque palette a 2, 4, 8, 16, 32, 64 ou 256 entrées). Pour simuler plus de 255 ou 256 couleurs, on utilise généralement la {{interwiki("wikipedia", "dithering", "diffusion d'erreur")}}. Il est <a href="https://gif.ski/">techniquement possible</a> de superposer plusieurs blocs d'images, chacun avec sa propre palette de couleurs, pour créer des images en couleurs réelles, mais en pratique, cela est rarement fait.</p> +<p>Chaque pixel d'un GIF est représenté par une seule valeur de 8 bits servant d'index dans une palette de couleurs de 24 bits (8 bits pour le rouge, le vert et le bleu). La longueur d'une table de couleurs est toujours une puissance de 2 (c'est-à-dire que chaque palette a 2, 4, 8, 16, 32, 64 ou 256 entrées). Pour simuler plus de 255 ou 256 couleurs, on utilise généralement la <a href="https://fr.wikipedia.org/wiki/Diffusion_d%27erreur">diffusion d'erreur(<i>dithering</i>)</a>. Il est <a href="https://gif.ski/">techniquement possible</a> de superposer plusieurs blocs d'images, chacun avec sa propre palette de couleurs, pour créer des images en couleurs réelles, mais en pratique, cela est rarement fait.</p> <p>Les pixels sont opaques, sauf si un indice de couleur spécifique est désigné comme transparent, auquel cas les pixels colorés à cette valeur sont entièrement transparents.</p> @@ -302,9 +417,9 @@ original_slug: Web/Media/Formats/Types_des_images <p>Le GIF est extrêmement populaire depuis des décennies, en raison de sa simplicité et de sa compatibilité. Son support d'animation a provoqué un regain de popularité à l'ère des médias sociaux, lorsque les GIF animés ont commencé à être largement utilisés pour de courtes "vidéos", des mèmes et d'autres séquences d'animation simples.</p> -<p>Une autre caractéristique populaire du GIF est la prise en charge de l'{{interwiki("wikipedia", "Interlacing_(bitmaps)", "entrelacement")}}, où les rangées de pixels sont stockées dans le désordre afin que les fichiers partiellement reçus puissent être affichés en qualité inférieure. Cela est particulièrement utile lorsque les connexions réseau sont lentes.</p> +<p>Une autre caractéristique populaire du GIF est la prise en charge de l'<a href="https://fr.wikipedia.org/wiki/Entrelacement_(image_matricielle)">entrelacement</a>, où les rangées de pixels sont stockées dans le désordre afin que les fichiers partiellement reçus puissent être affichés en qualité inférieure. Cela est particulièrement utile lorsque les connexions réseau sont lentes.</p> -<p>Le format GIF est un bon choix pour les images et les animations simples, bien que la conversion d'images couleur en GIF puisse entraîner des diffusions d'erreur insatisfaisantes. En règle générale, le contenu moderne devrait utiliser {{anch("PNG")}} pour les images fixes sans perte et indexées, et devrait envisager d'utiliser {{anch("APNG")}} pour les séquences d'animation sans perte.</p> +<p>Le format GIF est un bon choix pour les images et les animations simples, bien que la conversion d'images couleur en GIF puisse entraîner des diffusions d'erreur insatisfaisantes. En règle générale, le contenu moderne devrait utiliser <a href="#png">PNG</a> pour les images fixes sans perte et indexées, et devrait envisager d'utiliser <a href="#apng">APNG</a> pour les séquences d'animation sans perte.</p> <table class="standard-table"> <tbody> @@ -326,8 +441,8 @@ original_slug: Web/Media/Formats/Types_des_images <td>Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> </tr> <tr> - <th scope="row">Dimensions maximum</th> - <td>65,536×65,536 pixels</td> + <th scope="row">Dimensions maximales</th> + <td>65 536×65 536 pixels</td> </tr> <tr> <th scope="row">Modes de couleur pris en charge</th> @@ -375,20 +490,20 @@ original_slug: Web/Media/Formats/Types_des_images <td>Sans perte (LZW)</td> </tr> <tr> - <th scope="row">Lisence</th> + <th scope="row">Licence</th> <td>Alors que le format GIF lui-même est ouvert, l'algorithme de compression LZW était couvert par des brevets jusqu'au début des années 2000. Depuis le 7 juillet 2004, tous les brevets pertinents ont expiré et le format GIF peut être utilisé librement.</td> </tr> </tbody> </table> -<h3 id="ICO_Microsoft_Windows_icon"><a id="ICO" name="ICO">ICO</a> (Microsoft Windows icon)</h3> +<h3 id="ico">ICO (Microsoft Windows icon)</h3> -<p>Le format de fichier ICO (Microsoft Windows icon) a été conçu par Microsoft pour les icônes de bureau des systèmes Windows. Cependant, les premières versions d'Internet Explorer ont introduit la possibilité pour un site web de fournir un fichier ICO nommé <code>favicon.ico</code> dans le répertoire racine d'un site web pour spécifier un <strong><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML#Ajouter_des_ic%C3%B4nes_personnalis%C3%A9es_%C3%A0_un_site">favicon</a></strong> — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile.</p> +<p>Le format de fichier ICO (Microsoft Windows icon) a été conçu par Microsoft pour les icônes de bureau des systèmes Windows. Cependant, les premières versions d'Internet Explorer ont introduit la possibilité pour un site web de fournir un fichier ICO nommé <code>favicon.ico</code> dans le répertoire racine d'un site web pour spécifier un <strong><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter_des_ic%c3%b4nes_personnalis%c3%a9es_%c3%a0_un_site">favicon</a></strong> — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile.</p> -<p>Un fichier ICO peut contenir plusieurs icônes, et commence par un répertoire contenant des détails sur chacune d'entre elles. Ce répertoire est suivi des données relatives aux icônes. Les données de chaque icône peuvent être soit une image {{anch("BMP")}} sans l'en-tête du fichier, soit une image {{anch("PNG")}} complète (y compris l'en-tête du fichier). Si vous utilisez des fichiers ICO, vous devez utiliser le format BMP, car la prise en charge du format PNG dans les fichiers ICO n'a été ajoutée qu'à partir de Windows Vista et pourrait ne pas être bien prise en charge.</p> +<p>Un fichier ICO peut contenir plusieurs icônes, et commence par un répertoire contenant des détails sur chacune d'entre elles. Ce répertoire est suivi des données relatives aux icônes. Les données de chaque icône peuvent être soit une image <a href="#bmp">BMP</a> sans l'en-tête du fichier, soit une image <a href="#png">PNG</a> complète (y compris l'en-tête du fichier). Si vous utilisez des fichiers ICO, vous devez utiliser le format BMP, car la prise en charge du format PNG dans les fichiers ICO n'a été ajoutée qu'à partir de Windows Vista et pourrait ne pas être bien prise en charge.</p> <div class="blockIndicator warning"> -<p>Les fichiers ICO ne doivent pas être utilisés dans le contenu Web. En outre, leur utilisation pour les favicons a diminué au profit de l'utilisation d'un fichier PNG et de l'élément {{HTMLElement("link")}}, comme décrit dans {{SectionOnPage("/fr/docs/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Ajouter des icônes personnalisées à un site")}} .</p> +<p>Les fichiers ICO ne doivent pas être utilisés dans le contenu Web. En outre, leur utilisation pour les favicons a diminué au profit de l'utilisation d'un fichier PNG et de l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>, comme décrit dans <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter_des_ic%C3%B4nes_personnalis%C3%A9es_%C3%A0_un_site">cette section</a>.</p> </div> <table class="standard-table"> @@ -410,7 +525,7 @@ original_slug: Web/Media/Formats/Types_des_images <td>Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari</td> </tr> <tr> - <th scope="row">Dimensions maximum</th> + <th scope="row">Dimensions maximales</th> <td>256×256 pixels</td> </tr> <tr> @@ -494,15 +609,15 @@ original_slug: Web/Media/Formats/Types_des_images <td>Les icônes au format BMP utilisent presque toujours une compression sans perte, mais des méthodes avec perte sont disponibles. Les icônes au format PNG sont toujours compressées sans perte.</td> </tr> <tr> - <th scope="row">Lisence</th> + <th scope="row">Licence</th> <td>—</td> </tr> </tbody> </table> -<h3 id="JPEG_Joint_Photographic_Experts_Group_image"><a id="JPEG" name="JPEG">JPEG</a> (Joint Photographic Experts Group image)</h3> +<h3 id="jpeg">JPEG (Joint Photographic Experts Group image)</h3> -<p>Le {{Glossary("JPEG")}} (typiquement prononcé "<strong>j-peg</strong>") est actuellement le format de compression avec perte le plus utilisé pour les images fixes. Il est particulièrement utile pour les photographies ; l'application de la compression avec perte au contenu nécessitant de la netteté, comme les diagrammes ou les graphiques, peut produire des résultats insatisfaisants.</p> +<p>Le <a href="/fr/docs/Glossary/jpeg">JPEG</a> (typiquement prononcé "<strong>j-peg</strong>") est actuellement le format de compression avec perte le plus utilisé pour les images fixes. Il est particulièrement utile pour les photographies ; l'application de la compression avec perte au contenu nécessitant de la netteté, comme les diagrammes ou les graphiques, peut produire des résultats insatisfaisants.</p> <p>Le JPEG est en fait un format de données pour les photos compressées, plutôt qu'un type de fichier. La spécification JFIF (JPEG <strong>F</strong>ile <strong>I</strong>nterchange <strong>F</strong>ormat) décrit le format des fichiers que nous considérons comme des images "JPEG".</p> @@ -525,8 +640,8 @@ original_slug: Web/Media/Formats/Types_des_images <td>Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari</td> </tr> <tr> - <th scope="row">Dimensions maximum</th> - <td>65,535×65,535 pixels</td> + <th scope="row">Dimensions maximales</th> + <td>65 535×65 535 pixels</td> </tr> <tr> <th scope="row">Modes de couleur pris en charge</th> @@ -571,18 +686,18 @@ original_slug: Web/Media/Formats/Types_des_images </tr> <tr> <th scope="row">Compression</th> - <td>Sans perte; sur la base de la {{interwiki("wikipedia", "transformée en cosinus discrète")}}</td> + <td>Sans perte; sur la base de la <a href="https://fr.wikipedia.org/wiki/Transform%C3%A9e_en_cosinus_discr%C3%A8te">transformée en cosinus discrète</a></td> </tr> <tr> - <th scope="row">Lisence</th> + <th scope="row">Licence</th> <td>Depuis le 27 octobre 2006, tous les brevets américains ont expiré.</td> </tr> </tbody> </table> -<h3 id="PNG_Portable_Network_Graphics"><a id="PNG" name="PNG">PNG</a> (Portable Network Graphics)</h3> +<h3 id="png">PNG (Portable Network Graphics)</h3> -<p>Le {{Glossary('PNG')}} (prononcé "<strong>png</strong>") utilise une compression sans perte ou avec perte afin de fournir une compression plus efficace, et prend en charge des profondeurs de couleurs plus élevées que {{anch("GIF")}}, ainsi qu'une transparence alpha complète.</p> +<p>Le <a href="/fr/docs/Glossary/PNG">PNG</a> (prononcé "<strong>png</strong>") utilise une compression sans perte ou avec perte afin de fournir une compression plus efficace, et prend en charge des profondeurs de couleurs plus élevées que <a href="#gif">GIF</a>, ainsi qu'une transparence alpha complète.</p> <p>Le format PNG est largement soutenu, tous les principaux navigateurs offrant une prise en charge complète de ses fonctionnalités. Internet Explorer, qui a introduit le support PNG dans les versions 4-5, ne l'a pas entièrement pris en charge avant IE 9, et a connu de nombreux bogues tristement célèbres pendant de nombreuses années, y compris dans l'Internet Explorer 6, autrefois omniprésent. Cela a ralenti l'adoption de la PNG, mais elle est maintenant couramment utilisée, surtout lorsqu'il faut reproduire avec précision l'image source.</p> @@ -668,8 +783,8 @@ original_slug: Web/Media/Formats/Types_des_images </td> </tr> <tr> - <th scope="row">Dimensions maximum</th> - <td>2,147,483,647×2,147,483,647 pixels</td> + <th scope="row">Dimensions maximales</th> + <td>2 147 483 647×2 147 483 647 pixels</td> </tr> <tr> <th scope="row">Modes de couleur pris en charge</th> @@ -717,27 +832,27 @@ original_slug: Web/Media/Formats/Types_des_images <td>Couleur sans perte, éventuellement indexée comme le GIF</td> </tr> <tr> - <th scope="row">Lisence</th> - <td>©2003 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>), Tous Droits Réservés. Les règles du W3C en matière de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilité</a>, de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque commerciale</a>, d'<a href="http://www.w3.org/Consortium/Legal/copyright-documents">utilisation des documents</a> et de <a href="http://www.w3.org/Consortium/Legal/copyright-software">licences de logiciels</a> s'appliquent. Pas de brevets porteurs de royalties connus.</td> + <th scope="row">Licence</th> + <td>©2003 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="https://www.lcs.mit.edu/">MIT</a>, <a href="https://www.ercim.org/">ERCIM</a>, <a href="https://www.keio.ac.jp/">Keio</a>), Tous Droits Réservés. Les règles du W3C en matière de <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilité</a>, de <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque commerciale</a>, d'<a href="https://www.w3.org/Consortium/Legal/copyright-documents">utilisation des documents</a> et de <a href="https://www.w3.org/Consortium/Legal/copyright-software">licences de logiciels</a> s'appliquent. Pas de brevets porteurs de royalties connus.</td> </tr> </tbody> </table> -<h3 id="SVG_Scalable_Vector_Graphics"><a id="SVG" name="SVG">SVG</a> (Scalable Vector Graphics)</h3> +<h3 id="svg">SVG (Scalable Vector Graphics)</h3> -<p>Le SVG est une base <a href="/fr/docs/Glossaire/XML">XML</a> pour le format d'{{interwiki("wikipedia", "image vectorielle")}} qui spécifie le contenu d'une image comme un ensemble de commandes de dessin qui créent des formes, des lignes, appliquent des couleurs, des filtres, etc. Les fichiers SVG sont idéaux pour les diagrammes, les icônes et autres images qui peuvent être dessinés avec précision à n'importe quelle taille. En tant que tel, le SVG est populaire pour les éléments d'interface utilisateur dans la conception moderne du Web.</p> +<p>Le SVG est une base <a href="/fr/docs/Glossary/XML">XML</a> pour le format d'<a href="https://fr.wikipedia.org/wiki/Image_vectorielle">image vectorielle</a> qui spécifie le contenu d'une image comme un ensemble de commandes de dessin qui créent des formes, des lignes, appliquent des couleurs, des filtres, etc. Les fichiers SVG sont idéaux pour les diagrammes, les icônes et autres images qui peuvent être dessinés avec précision à n'importe quelle taille. En tant que tel, le SVG est populaire pour les éléments d'interface utilisateur dans la conception moderne du Web.</p> <p>Les fichiers SVG sont des fichiers texte contenant le code source qui, une fois interprété, dessine l'image souhaitée. Par exemple, cet exemple définit une zone de dessin de taille initiale de 100 par 100 unités, contenant une ligne tracée en diagonale à travers la boîte :</p> -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="https://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> </svg></pre> <p>Le SVG peut être utilisé dans le contenu du web de deux façons :</p> <ol> - <li>Vous pouvez directement écrire l'élément {{HTMLElement("svg")}} dans le HTML, contenant des <a href="/fr/docs/Web/SVG/Element">éléments SVG</a> pour dessiner l'image.</li> - <li>Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments {{HTMLElement("img")}} et {{HTMLElement("image")}}, les propriété {{cssxref("background-image")}} du CSS, etc.</li> + <li>Vous pouvez directement écrire l'élément <a href="/fr/docs/Web/HTML/Element/svg"><code><svg></code></a> dans le HTML, contenant des <a href="/fr/docs/Web/SVG/Element">éléments SVG</a> pour dessiner l'image.</li> + <li>Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> et <a href="/fr/docs/Web/HTML/Element/image"><code><image></code></a>, les propriétés <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> du CSS, etc.</li> </ol> <p>Le SVG est un choix idéal pour les images qui peuvent être représentées à l'aide d'une série de commandes de dessin, en particulier si la taille à laquelle l'image sera rendue est inconnue ou peut varier, puisque le SVG s'adaptera en douceur à la taille souhaitée. Il n'est généralement pas utile pour les images strictement bitmap ou photographiques, bien qu'il soit possible d'inclure des images bitmap dans un SVG.</p> @@ -783,7 +898,7 @@ original_slug: Web/Media/Formats/Types_des_images <td>3.2</td> </tr> <tr> - <th scope="row">SVG comme image ({{HTMLElement("img")}} etc)</th> + <th scope="row">SVG comme image (<a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> etc)</th> <td>28</td> <td>12</td> <td>4</td> @@ -802,22 +917,22 @@ original_slug: Web/Media/Formats/Types_des_images </tr> <tr> <th scope="row">Modes de couleur pris en charge</th> - <td>Les couleurs en SVG sont spécifiées à l'aide de <a href="/fr/docs/Web/CSS/Type_color">syntaxe de couleur CSS</a>.</td> + <td>Les couleurs en SVG sont spécifiées à l'aide de <a href="/fr/docs/Web/CSS/color_value">syntaxe de couleur CSS</a>.</td> </tr> <tr> <th scope="row">Compression</th> <td>La source SVG peut être compressée pendant le transit en utilisant les techniques de <a href="/fr/docs/Web/HTTP/Compression">compression HTTP</a>, ou sur disque en tant que fichier <code>.svgz</code>.</td> </tr> <tr> - <th scope="row">Lisence</th> - <td>©2018 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), Tous Droits Réservés. Les règles du W3C en matière de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilité</a>, de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque commerciale</a>, d'<a href="http://www.w3.org/Consortium/Legal/copyright-documents">utilisation des documents</a> et de <a href="http://www.w3.org/Consortium/Legal/copyright-software">licences de logiciels</a> s'appliquent. Pas de brevets porteurs de royalties connus.</td> + <th scope="row">Licence</th> + <td>©2018 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="https://www.lcs.mit.edu/">MIT</a>, <a href="https://www.ercim.org/">ERCIM</a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>), Tous Droits Réservés. Les règles du W3C en matière de <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilité</a>, de <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque commerciale</a>, d'<a href="https://www.w3.org/Consortium/Legal/copyright-documents">utilisation des documents</a> et de <a href="https://www.w3.org/Consortium/Legal/copyright-software">licences de logiciels</a> s'appliquent. Pas de brevets porteurs de royalties connus.</td> </tr> </tbody> </table> -<h3 id="TIFF_Tagged_Image_File_Format"><a id="TIFF" name="TIFF">TIFF</a> (Tagged Image File Format)</h3> +<h3 id="tiff">TIFF (Tagged Image File Format)</h3> -<p>{{interwiki("wikipedia", "TIFF")}} est un format de fichier graphique matriciel qui a été créé pour stocker des photos scannées, bien qu'il puisse s'agir de n'importe quel type d'image. Il s'agit d'un format quelque peu "lourd", dans la mesure où les fichiers TIFF ont tendance à être plus volumineux que les images d'autres formats. Cela s'explique par les métadonnées souvent incluses, ainsi que par le fait que la grande majorité des fichiers TIFF ne sont pas compressés. Cependant, les méthodes de compression avec et sans perte sont toutes deux prises en charge par la spécification TIFF.</p> +<p><a href="https://fr.wikipedia.org/wiki/Tagged_Image_File_Format">TIFF</a> est un format de fichier graphique matriciel qui a été créé pour stocker des photos scannées, bien qu'il puisse s'agir de n'importe quel type d'image. Il s'agit d'un format quelque peu "lourd", dans la mesure où les fichiers TIFF ont tendance à être plus volumineux que les images d'autres formats. Cela s'explique par les métadonnées souvent incluses, ainsi que par le fait que la grande majorité des fichiers TIFF ne sont pas compressés. Cependant, les méthodes de compression avec et sans perte sont toutes deux prises en charge par la spécification TIFF.</p> <p>Chaque valeur d'un fichier TIFF est spécifiée à l'aide de sa <strong>balise</strong> (indiquant le type d'information dont il s'agit, comme la largeur de l'image) et de son <strong>type</strong> (indiquant le format dans lequel les données sont stockées), suivis de la longueur du tableau de valeurs à attribuer à cette balise (toutes les propriétés sont stockées dans des tableaux, même pour des valeurs uniques). Cela permet d'utiliser différents types de données pour les mêmes propriétés. Par exemple, la largeur d'une image, <code>ImageWidth</code>, est stockée à l'aide de la balise <code>0x0100</code> et est un tableau à une entrée. En précisant le type 3 (<code>SHORT</code>), la valeur de <code>ImageWidth</code> est stockée comme une valeur de 16 bits :</p> @@ -892,8 +1007,8 @@ original_slug: Web/Media/Formats/Types_des_images <td>Aucun navigateur n'intègre la prise en charge du TIFF ; son intérêt réside dans le fait qu'il peut être téléchargé</td> </tr> <tr> - <th scope="row">Dimensions maximum</th> - <td>4,294,967,295×4,294,967,295 pixels (théoriquement)</td> + <th scope="row">Dimensions maximales</th> + <td>4 294 967 295×4 294 967 295 pixels (théoriquement)</td> </tr> <tr> <th scope="row">Modes de couleur pris en charge</th> @@ -944,19 +1059,19 @@ original_slug: Web/Media/Formats/Types_des_images <td>La plupart des fichiers TIFF ne sont pas compressés, mais les PackBits sans perte et la compression LZW sont pris en charge, tout comme la compression JPEG avec perte.</td> </tr> <tr> - <th scope="row">Lisence</th> + <th scope="row">Licence</th> <td>Aucune licence n'est requise (à l'exception de celles associées aux bibliothèques que vous pourriez utiliser) ; tous les brevets connus ont expiré.</td> </tr> </tbody> </table> -<h3 id="Image_WebP"><a id="WebP" name="WebP">Image WebP</a></h3> +<h3 id="webp">WebP</h3> <p>Le WebP prend en charge la compression avec perte via un codage prédictif basé sur le codec vidéo VP8, et la compression sans perte qui utilise des substitutions pour la répétition des données. Les images WebP avec perte sont en moyenne 25 à 35 % plus petites que les images JPEG dont le niveau de compression est visuellement similaire. Les images WebP sans perte sont généralement 26 % plus petites que les mêmes images au format PNG.</p> <p>WebP prend également en charge l'animation : dans un fichier WebP avec perte, les données d'image sont représentées par un flux binaire VP8, qui peut contenir plusieurs images. Le fichier WebP sans perte contient le fragment <code>ANIM</code>, qui décrit l'animation, et le fragment <code>ANMF</code>, qui représente une image d'une séquence d'animation. Le bouclage est pris en charge.</p> -<p>WebP bénéficie désormais d'un large soutien dans les dernières versions des principaux navigateurs web, bien qu'il ne bénéficie pas d'un soutien historique profond. Fournir une solution de repli au format {{anch("JPEG")}} ou {{anch("PNG")}}, par exemple avec <a href="/fr/docs/Web/HTML/Element/picture">l'élément <code><picture></code></a>.</p> +<p>WebP bénéficie désormais d'un large soutien dans les dernières versions des principaux navigateurs web, bien qu'il ne bénéficie pas d'un soutien historique profond. Fournir une solution de repli au format <a href="#jpeg">JPEG</a> ou <a href="#png">PNG</a>, par exemple avec <a href="/fr/docs/Web/HTML/Element/picture">l'élément <code><picture></code></a>.</p> <table class="standard-table"> <tbody> @@ -972,7 +1087,7 @@ original_slug: Web/Media/Formats/Types_des_images <th scope="row">Spécification</th> <td> <p><a href="https://developers.google.com/speed/webp/docs/riff_container">Spécification des conteneurs RIFF</a> (en)<br> - {{RFC(6386, "Format des données VP8 et guide de décodage")}} (en) (encodage avec perte)<br> + <a href="https://datatracker.ietf.org/doc/html/rfc6386">RFC 6386 - Format des données VP8 et guide de décodage</a> (en) (encodage avec perte)<br> <a href="https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification">Spécification du flux binaire sans perte WebP</a> (en)</p> </td> </tr> @@ -1025,8 +1140,8 @@ original_slug: Web/Media/Formats/Types_des_images </td> </tr> <tr> - <th scope="row">Dimensions maximum</th> - <td>16,383×16,383 pixels</td> + <th scope="row">Dimensions maximales</th> + <td>16 383×16 383 pixels</td> </tr> <tr> <th scope="row">Modes de couleur pris en charge</th> @@ -1043,7 +1158,7 @@ original_slug: Web/Media/Formats/Types_des_images </tbody> </table> -<h3 id="XBM_X_Window_System_Bitmap_file"><a id="XBM" name="XBM">XBM</a> (X Window System Bitmap file)</h3> +<h3 id="xbm">XBM (X Window System Bitmap file)</h3> <p>Les fichiers XBM (X Bitmap) ont été les premiers à être pris en charge sur le Web, mais ils ne sont plus utilisés et doivent être évités, car leur format peut poser des problèmes de sécurité. Les navigateurs modernes n'ont pas pris en charge les fichiers XBM depuis de nombreuses années, mais lorsqu'il s'agit de contenus plus anciens, vous pouvez en trouver encore.</p> @@ -1074,10 +1189,10 @@ static unsigned char square8_bits[] = { </tr> <tr> <th scope="row">Compatibilité des navigateurs</th> - <td>Firefox 1–3.5, Internet Explorer 1–5</td> + <td>Firefox 1 à 3.5, Internet Explorer 1 à 5</td> </tr> <tr> - <th scope="row">Dimensions maximum</th> + <th scope="row">Dimensions maximales</th> <td>Illimitée</td> </tr> <tr> @@ -1136,9 +1251,9 @@ static unsigned char square8_bits[] = { <p>Il est probablement plus facile de choisir le format d'image le mieux adapté à vos besoins que les formats vidéo, car il existe moins d'options bénéficiant d'un large soutien et chacune d'entre elles tend à avoir un ensemble spécifique de cas d'utilisation.</p> -<h3 id="Photographies">Photographies</h3> +<h3 id="photographies">Photographies</h3> -<p>Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de {{anch("JPEG")}} et {{anch("WebP")}} de bons choix pour les photographies, le JPEG étant plus compatible mais le WebP offrant peut-être une meilleure compression. Pour maximiser la qualité et réduire le temps de téléchargement, envisagez de fournir à la fois une {{anch("Providing image fallbacks", "solution de repli")}} avec WebP comme premier choix et JPEG comme second. Sinon, le JPEG est le choix le plus sûr pour la compatibilité.</p> +<p>Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de <a href="#jpeg">JPEG</a> et <a href="#webp">WebP</a> de bons choix pour les photographies, le JPEG étant plus compatible mais le WebP offrant peut-être une meilleure compression. Pour maximiser la qualité et réduire le temps de téléchargement, envisagez de fournir à la fois une solution de repli avec WebP comme premier choix et JPEG comme second. Sinon, le JPEG est le choix le plus sûr pour la compatibilité.</p> <table class="standard-table" style="max-width: 42rem;"> <thead> @@ -1155,11 +1270,11 @@ static unsigned char square8_bits[] = { </tbody> </table> -<h3 id="Icônes">Icônes</h3> +<h3 id="icônes">Icônes</h3> -<p>Pour les images plus petites comme les icônes, utilisez un format sans perte pour éviter la perte de détails dans une image de taille limitée. Si le format WebP sans perte est idéal à cette fin, il n'est pas encore très répandu, de sorte que le format PNG est un meilleur choix, à moins que vous n'offriez une {{anch("Providing image fallbacks", "solution de repli")}}. Si votre image contient moins de 256 couleurs, le GIF est une option, bien que le PNG comprime souvent encore plus petit avec son option de compression indexée (PNG-8).</p> +<p>Pour les images plus petites comme les icônes, utilisez un format sans perte pour éviter la perte de détails dans une image de taille limitée. Si le format WebP sans perte est idéal à cette fin, il n'est pas encore très répandu, de sorte que le format PNG est un meilleur choix, à moins que vous n'offriez une solution de repli. Si votre image contient moins de 256 couleurs, le GIF est une option, bien que le PNG comprime souvent encore plus petit avec son option de compression indexée (PNG-8).</p> -<p>Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager {{anch("SVG")}}, puisqu'elle s'étend sur plusieurs résolutions et tailles, ce qui est parfait pour une conception réactive. Bien que la prise en charge du SVG soit bonne, il peut être utile de proposer un PNG de secours pour les navigateurs plus anciens.</p> +<p>Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager <a href="#svg">SVG</a>, puisqu'elle s'étend sur plusieurs résolutions et tailles, ce qui est parfait pour une conception réactive. Bien que la prise en charge du SVG soit bonne, il peut être utile de proposer un PNG de secours pour les navigateurs plus anciens.</p> <table class="standard-table" style="max-width: 42rem;"> <thead> @@ -1174,7 +1289,7 @@ static unsigned char square8_bits[] = { </thead> </table> -<h3 id="Captures_décran">Captures d'écran</h3> +<h3 id="captures_décran">Captures d'écran</h3> <p>À moins que vous ne soyez prêt à faire des compromis sur la qualité, vous devriez utiliser un format sans perte pour les captures d'écran. C'est particulièrement important si votre capture d'écran contient du texte, car le texte devient facilement flou et peu clair sous une compression avec perte.</p> @@ -1195,7 +1310,7 @@ static unsigned char square8_bits[] = { </thead> </table> -<h3 id="Diagrammes_dessins_et_diagrammes">Diagrammes, dessins et diagrammes</h3> +<h3 id="diagrammes_dessins_et_diagrammes">Diagrammes, dessins et diagrammes</h3> <p>Pour toute image pouvant être représentée par des graphiques vectoriels, le SVG est le meilleur choix. Sinon, vous devez utiliser un format sans perte comme le PNG. Si vous choisissez un format avec perte, tel que JPEG ou WebP avec perte, pesez soigneusement le niveau de compression pour éviter que le texte ou d'autres formes ne deviennent flous ou imprécis.</p> @@ -1206,15 +1321,15 @@ static unsigned char square8_bits[] = { <th scope="col">Choix de secours</th> </tr> <tr> - <td>{{anch("SVG")}}</td> - <td>{{anch("PNG")}}</td> + <td><a href="#svg">SVG</a></td> + <td><a href="#png">PNG</a></td> </tr> </thead> </table> -<h2 id="Fournir_des_solutions_de_repli_en_matière_dimage"><a id="solution de repli" name="solution de repli">Fournir des solutions de repli en matière d'image</a></h2> +<h2 id="Fournir_des_solutions_de_repli_en_matière_dimage">Fournir des solutions de repli en matière d'image</h2> -<p>Alors que l'élément HTML standard {{HTMLElement("img")}} ne supporte pas les retours de compatibilité pour les images, l'élément {{HTMLElement("picture")}} le fait. <code><picture></code> est utilisé comme enveloppe pour un certain nombre d'éléments {{HTMLElement("source")}}, chacun spécifiant une version de l'image dans un format différent ou sous des <a href="/fr/docs/Web/CSS/@media">conditions @media</a>, ainsi qu'un élément <code><img></code> qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible".</p> +<p>Alors que l'élément HTML standard <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> ne supporte pas les retours de compatibilité pour les images, l'élément <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a> le fait. <code><picture></code> est utilisé comme enveloppe pour un certain nombre d'éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a>, chacun spécifiant une version de l'image dans un format différent ou sous des <a href="/fr/docs/Web/CSS/@media">conditions @media</a>, ainsi qu'un élément <code><img></code> qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible".</p> <p>Par exemple, si vous affichez un diagramme mieux affiché avec SVG, mais que vous souhaitez offrir une solution de rechange à un PNG ou GIF du diagramme, vous feriez quelque chose comme ceci :</p> @@ -1234,7 +1349,7 @@ static unsigned char square8_bits[] = { <li><a href="/fr/docs/Web/Media/Formats">Guide des types et formats de médias</a></li> <li><a href="/fr/docs/Web/Media">Technologies media Web</a></li> <li><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide des codecs vidéo du Web</a></li> - <li>Les éléments {{Glossary("HTML")}} {{HTMLElement("img")}} et {{HTMLElement("picture")}}</li> - <li>La propriété CSS {{cssxref("background-image")}}</li> - <li>Le constructeur {{domxref("Image()")}} et l'interface {{domxref("HTMLImageElement")}}</li> + <li>Les éléments <a href="/fr/docs/Glossary/HTML">HTML</a> <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> et <a href="/fr/docs/Web/HTML/Element/picture"><code><picture></code></a></li> + <li>La propriété CSS <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a></li> + <li>Le constructeur <a href="/fr/docs/Web/API/Image"><code>Image()</code></a> et l'interface <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></li> </ul> diff --git a/files/fr/web/svg/attribute/text-anchor/index.html b/files/fr/web/svg/attribute/text-anchor/index.html index 3ac25fe5db..8f094d8e97 100644 --- a/files/fr/web/svg/attribute/text-anchor/index.html +++ b/files/fr/web/svg/attribute/text-anchor/index.html @@ -2,92 +2,95 @@ title: text-anchor slug: Web/SVG/Attribute/text-anchor tags: - - Attribut SVG - - NeedsCompatTable - SVG - SVG Attribute translation_of: Web/SVG/Attribute/text-anchor +browser-compat: svg.attributes.presentation.text-anchor --- -<p>« <a href="/fr/docs/Web/SVG/Attribute" title="en/SVG/Attribute">Référence des attributs SVG </a></p> - -<p>L'attribut <code>text-anchor</code> est utilisé pour aligner un élément <code>text</code> par rapport à un point dont la position est définie au début "<code>start</code>", au milieu "<code>middle</code>" ou à la fin "<code>end</code>" de son contenu.</p> - -<p><code>text-anchor</code> s'applique à chaque morceau de texte (voir <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextChunks" title="http://www.w3.org/TR/SVG/text.html#TextChunks">"text-chunks" (anglais)</a>) d'un élément <code>text</code> donné. Chaque morceau de texte a une position initiale courante qui est représentée par un point dans le référentiel de coordonnées de l'utilisateur déterminée selon le contexte : par les valeurs des attributs {{ SVGAttr("x") }} et {{ SVGAttr("y") }} sur un élément {{ SVGElement("text") }}, par la position du premier caractère affiché d'un morceau de texte pour un élément {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} ou {{ SVGElement("altGlyph") }} quels que soient les valeurs de ses attributs {{ SVGAttr("x") }} ou {{ SVGAttr("y") }} ou à la position initiale du texte d'un élément {{ SVGElement("textPath") }}.</p> - -<p>En tant qu'attribut de présentation, il peut aussi être utilisé directement comme une propriété dans une feuille de style CSS.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Attribut de présentation</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td>start | middle | end | <strong title="valeur par défaut">inherit</strong></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document de spécification</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2ème Édition) (anglais)</a></td> - </tr> - </tbody> -</table> - -<dl> - <dt>start</dt> - <dd>Les caractères affichés sont alignés de manière à ce que le début du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à gauche du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à droite. Pour certains textes asiatiques avec une orientation verticale de haut en bas, le résultat sera alors comparable à un alignement en haut.</dd> - <dt>middle</dt> - <dd>Les caractères sont affichés de manière à ce que le milieu du texte affiché soit la position initiale du texte. (Pour du texte sur un chemin <code>textPath</code>, le texte est dans un premier temps organisé virtuellement selon une ligne droite. Le point équidistant des extrémités horizontales du texte est alors déterminé. Puis, le texte est projeté sur le chemin <code>textPath</code> avec le point calculé précédemment placé à la position courante du texte.)</dd> - <dt>end</dt> - <dd>Les caractères sont alignés de sorte que la fin du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à droite du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à gauche.</dd> -</dl> - -<h2 id="Exemple" name="Exemple">Exemple</h2> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> - <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - - <span class="comment token"><!-- Materialisation of anchors --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>path</span> <span class="attr-name token">d</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>grey<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<div>{{SVGRef}}</div> +<p>L'attribut <strong><code>text-anchor</code></strong> est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété <a href="/fr/docs/Web/SVG/Attribute/inline-size"><code>inline-size</code></a> par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>. Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne.</p> - <span class="comment token"><!-- Anchors in action --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>start<span class="punctuation token">"</span></span> - <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> +<p>L'attribut <code>text-anchor</code> est appliqué à chaque bloc de texte individuel dans un élément <a href="/fr/docs/Web/SVG/Element/text"><code><text></code></a> donné. Chaque fragment de texte a une position de texte actuelle initiale, qui représente le point du système de coordonnées de l'utilisateur résultant (selon le contexte) de l'application des attributs <a href="/fr/docs/Web/SVG/Attribute/x"><code>x</code></a> et <a href="/fr/docs/Web/SVG/Attribute/y"><code>y</code></a> sur l'élément <code><text></code>, toute valeur d'attribut <code>x</code> ou <code>y</code> sur un élément <a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a>, <a href="/fr/docs/Web/SVG/Element/tref"><code><tref></code></a> ou <a href="/fr/docs/Web/SVG/Element/altGlyph"><code><altGlyph></code></a> assigné explicitement au premier caractère rendu dans un fragment de texte, ou la détermination de la position initiale du texte actuel pour un élément <a href="/fr/docs/Web/SVG/Element/textPath"><code><textPath></code></a>.</p> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>middle<span class="punctuation token">"</span></span> - <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>En tant qu'attribut de présentation, <code>text-anchor</code> peut être utilisé comme une propriété CSS.</p> +</div> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>end<span class="punctuation token">"</span></span> - <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span> +<p>Cet attribut peut être utilisé pour les éléments SVG suivants :</p> - <span class="comment token"><!-- Materialisation of anchors --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<ul> + <li><a href="/fr/docs/Web/SVG/Element/altGlyph"><code><altGlyph></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/text"><code><text></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/textPath"><code><textPath></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/tref"><code><tref></code></a></li> + <li><a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a></li> +</ul> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="cdata token"><![CDATA[ -text{ +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Matérialisation des ancrages --> + <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> + + <!-- Ancres en action --> + <text text-anchor="start" x="60" y="40">A</text> + <text text-anchor="middle" x="60" y="75">A</text> + <text text-anchor="end" x="60" y="110">A</text> + + <!-- Matérialisation des ancrages --> + <circle cx="60" cy="40" r="3" fill="red" /> + <circle cx="60" cy="75" r="3" fill="red" /> + <circle cx="60" cy="110" r="3" fill="red" /> + + <style><![CDATA[ + text { font: bold 36px Verdana, Helvetica, Arial, sans-serif; -} -]]></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + } + ]]></style> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="usage_notes">Notes d'utilisation</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>start</code></td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td><code>start</code> | <code>middle</code> | <code>end</code></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>discrete</td> + </tr> + </tbody> +</table> -<p><strong>Résultat</strong></p> +<dl> + <dt><code>start</code></dt> + <dd>Les caractères rendus sont alignés de telle sorte que le début de la chaîne de texte se trouve à la position initiale du texte courant. Pour un élément dont la valeur de propriété <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> est <code>ltr</code> (typique de la plupart des langues européennes), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la valeur de la propriété direction est <code>rtl</code> (typique de l'arabe et de l'hébreu), le côté droit du texte est rendu à la position initiale du texte. Pour un élément dont la direction du texte primaire est verticale (souvent typique des textes asiatiques), le côté supérieur du texte est rendu à la position initiale du texte.</dd> + <dt><code>middle</code></dt> + <dd>Les caractères rendus sont alignés de telle sorte que le milieu de la chaîne de texte se trouve à la position actuelle du texte. (Pour le texte sur un chemin, la chaîne de texte est d'abord disposée en ligne droite. Le point médian entre le début et la fin de la chaîne de texte est déterminé. Ensuite, la chaîne de texte est mappée sur le chemin avec ce point médian placé à la position actuelle du texte).</dd> + <dt><code>end</code></dt> + <dd>Les caractères rendus sont décalés de telle sorte que la fin du texte rendu résultant (position finale du texte actuel avant l'application de la propriété <code>text-anchor</code>) se trouve à la position initiale du texte actuel. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>ltr</code> (typique pour la plupart des langues européennes), le côté droit du texte est rendu à la position initiale du texte. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>rtl</code> (typique pour l'arabe et l'hébreu), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la direction primaire du texte est verticale (souvent typique des textes asiatiques), le bas du texte est rendu à la position initiale du texte.</dd> +</dl> -<p><a href="https://mdn.mozillademos.org/en-US/docs/Web/SVG/Attribute/text-anchor$samples/Example?revision=648557"><img alt="" src="http://img11.hostingpics.net/pics/616999AAA.png" title="Aperçu de Example?revision=648557"></a></p> +<h2 id="specifications">Spécifications</h2> -<h2 id="Éléments">Éléments</h2> +<p>{{Specifications}}</p> -<p>Les éléments suivants ont l'attribut <code>text-anchor</code></p> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<ul> - <li><a href="/fr/docs/Web/SVG/Element" title="en/SVG/Element#TextContent">Éléments contenant du texte</a> »</li> -</ul> +<p>{{Compat}}</p> |
