diff options
author | tristantheb <tristantheb@users.noreply.github.com> | 2021-06-19 17:43:37 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-19 17:43:37 +0200 |
commit | 6f3255f0763a673123b9255606e9bf91b51ca409 (patch) | |
tree | 84529c9efbbf6aa8b004d104eb0cdd32b1837a62 /files/fr/web/media | |
parent | 088aef3c0ae4f2f6548ffcc5aa30f3dec8f1d582 (diff) | |
download | translated-content-6f3255f0763a673123b9255606e9bf91b51ca409.tar.gz translated-content-6f3255f0763a673123b9255606e9bf91b51ca409.tar.bz2 translated-content-6f3255f0763a673123b9255606e9bf91b51ca409.zip |
UPDT: Remove $sample and update from en-US - Issue #1231 (#1247)
* UPDT: Remove and update from en-US
* UPDT: Remove and update from en-US
* UPDT: Remove and update from en-US
* Review #1247 - img live samples do not resolves to en-US files
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/media')
-rw-r--r-- | files/fr/web/media/formats/image_types/index.html | 351 |
1 files changed, 233 insertions, 118 deletions
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> |