From 46a0a41aa018b1c44655a088aa5be5f1d33a513e Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 08:28:42 +0100 Subject: convert content to md --- .../index.md | 122 +- files/fr/web/media/formats/image_types/index.md | 2620 +++++++++++--------- files/fr/web/media/formats/index.md | 78 +- files/fr/web/media/formats/support_issues/index.md | 40 +- files/fr/web/media/index.md | 59 +- 5 files changed, 1591 insertions(+), 1328 deletions(-) (limited to 'files/fr') diff --git a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md index 0711aad0d2..075cd61404 100644 --- a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md +++ b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md @@ -9,96 +9,92 @@ tags: translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video original_slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML --- -
{{HTMLSidebar}}
+{{HTMLSidebar}} -

Dynamic Adaptive Streaming over HTTP (DASH) est un protocole de streaming adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.

+**_Dynamic Adaptive Streaming over HTTP_ (DASH)** est un protocole de _streaming_ adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence media.dash.enabled sous about:config.

+Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence `media.dash.enabled` sous `about:config`. -

Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'API Media Source Extensions qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug 778617.

+Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'[API Media Source Extensions](http://www.w3.org/TR/media-source/) qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug [778617](https://bugzilla.mozilla.org/show_bug.cgi?id=778617). -

Utiliser DASH, côté serveur

+## Utiliser DASH, côté serveur -

Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :

+Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de : - +- ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum ([ffmpeg.org](http://www.ffmpeg.org/)). -

1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo

+### 1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo -

Dans les lignes d'exemple qui suivent, on utilise le fichier de départ in.video. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.

+Dans les lignes d'exemple qui suivent, on utilise le fichier de départ** _in.video_**. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg. -

On créera la piste audio avec :

+On créera la piste audio avec : -
ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm
-
+ ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm -

On créera les pistes vidéos avec :

+On créera les pistes vidéos avec : -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm
+    ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+    -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm
 
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm
+    ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+    -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm
 
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm
+    ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+    -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm
 
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm
+    ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+    -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm
 
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
-
+ ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ + -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm -

Autrement, on peut utiliser cette commande :

+Autrement, on peut utiliser cette commande : -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
--g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \
--an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \
--an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \
--an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \
--an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
+ ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ + -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ + -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ + -an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ + -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ + -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ + -an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm -

2. Créer le manifeste

+### 2. Créer le manifeste -
ffmpeg \
-  -f webm_dash_manifest -i video_160x90_250k.webm \
-  -f webm_dash_manifest -i video_320x180_500k.webm \
-  -f webm_dash_manifest -i video_640x360_750k.webm \
-  -f webm_dash_manifest -i video_1280x720_1500k.webm \
-  -f webm_dash_manifest -i my_audio.webm \
-  -c copy \
-  -map 0 -map 1 -map 2 -map 3 -map 4 \
-  -f webm_dash_manifest \
-  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
-  my_video_manifest.mpd
+ ffmpeg \ + -f webm_dash_manifest -i video_160x90_250k.webm \ + -f webm_dash_manifest -i video_320x180_500k.webm \ + -f webm_dash_manifest -i video_640x360_750k.webm \ + -f webm_dash_manifest -i video_1280x720_1500k.webm \ + -f webm_dash_manifest -i my_audio.webm \ + -c copy \ + -map 0 -map 1 -map 2 -map 3 -map 4 \ + -f webm_dash_manifest \ + -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ + my_video_manifest.mpd -

Les arguments -map correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument -adaptation_sets permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).

+Les arguments `-map` correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument `-adaptation_sets` permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio). -

On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers .mpd avec mimetype="application/dash+xml".

+On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers `.mpd` avec `mimetype="application/dash+xml"`. -

Utiliser DASH, côté client

+## Utiliser DASH, côté client -

Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :

+Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel : -
<video>
-  <source src="movie.mpd">
-  <source src="movie.webm">
+```html
+
+ +``` -

C'est tout !
- Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.

+C'est tout ! +Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative. -

Voir aussi

+## Voir aussi - +- [La spécification WebM DASH du projet WebM](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification) +- [Le forum DASH Industry](http://dashif.org/) +- [Descriptions du projet WebM pour la création de fichiers DASH avec FFMPEG](http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-adaptive-webm-using-dash) diff --git a/files/fr/web/media/formats/image_types/index.md b/files/fr/web/media/formats/image_types/index.md index 06035c62ec..79eb83cbee 100644 --- a/files/fr/web/media/formats/image_types/index.md +++ b/files/fr/web/media/formats/image_types/index.md @@ -27,101 +27,140 @@ tags: translation_of: Web/Media/Formats/Image_types original_slug: Web/Media/Formats/Types_des_images --- -
{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}
+{{QuickLinksWithSubpages("/fr/docs/Web/Media")}} -

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.

+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. -

Types de fichiers d'images communs

+## Types de fichiers d'images communs -

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 BMP ne soit généralement pas recommandé, car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web.

+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 **BMP ne soit généralement pas recommandé**, car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbréviationFormat du fichier (en)Type de MIMEExtention(s) du fichierRésuméPrise en charge navigateur
APNGAnimated Portable Network Graphicsimage/apng.apngBon choix pour les animations sans perte de qualité. AVIF et WebP ont de meilleures performances mais une moins bonne couverture des navigateurs.Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
AVIFAV1 Image File Formatimage/avif.avifUn 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 <picture> pour s'adapter aux différentes prises en charge des navigateurs.Chrome, Edge, Firefox (fonctionnalités de base), Opera
GIFGraphics Interchange Formatimage/gif.gifUn 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.Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEGJoint Photographic Expert Groupimage/jpeg.jpg, .jpeg, .jfif, .pjpeg, .pjpUn 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.Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNGPortable Network Graphicsimage/png.pngPNG 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.Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVGScalable Vector Graphicsimage/svg+xml.svgUn 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.Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
WebPWeb Pictureimage/webp.webpUn 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 frames animées, la transparence, etc.Chrome, Edge, Firefox, Opera
AbréviationFormat du fichier (en)Type de MIMEExtention(s) du fichierRésuméPrise en charge navigateur
APNGAnimated Portable Network Graphicsimage/apng.apng + Bon choix pour les animations sans perte de qualité. AVIF et WebP ont de + meilleures performances mais une moins bonne couverture des navigateurs. + Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
AVIFAV1 Image File Formatimage/avif.avif + 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 + <picture> + pour s'adapter aux différentes prises en charge des navigateurs. + Chrome, Edge, Firefox (fonctionnalités de base), Opera
GIFGraphics Interchange Formatimage/gif.gif + 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. + Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEGJoint Photographic Expert Groupimage/jpeg + .jpg, .jpeg, .jfif, + .pjpeg, .pjp + + 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. + Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNGPortable Network Graphicsimage/png.png + 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. + Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVGScalable Vector Graphicsimage/svg+xml.svg + 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. + Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
WebPWeb Pictureimage/webp.webp + 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 frames animées, la transparence, etc. + Chrome, Edge, Firefox, Opera
-

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.

- +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. -

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.

+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. - - +
+ - - - - - + + + + + - - + + @@ -143,1209 +182,1456 @@ original_slug: Web/Media/Formats/Types_des_images - -
AbréviationFormat de fichierType MIMEExtension(s)Prise en charge navigateurAbréviationFormat de fichierType MIMEExtension(s)Prise en charge navigateur
BMP Bitmap.tif, .tiff Aucune prise en charge native, addons nécessaires
+ + -

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.

+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. -

Détails sur le type de fichier image

+## Détails sur le type de fichier image -

Les sections suivantes donnent un bref aperçu de chacun des types de fichiers d'images pris en charge par les navigateurs web.

+Les sections suivantes donnent un bref aperçu de chacun des types de fichiers d'images pris en charge par les navigateurs web. -

Dans les tableaux ci-dessous, le terme bits par composante 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. La profondeur de bit, d'autre part, correspond au nombre total de bits utilisés pour représenter chaque pixel en mémoire.

+Dans les tableaux ci-dessous, le terme **bits par composante** 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. **La profondeur de bit**, d'autre part, correspond au nombre total de bits utilisés pour représenter chaque pixel en mémoire. -

APNG (Animated Portable Network Graphics)

+### APNG (Animated Portable Network Graphics) -

L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le 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 profondeur de couleur, alors que le GIF animé ne supporte que des couleurs indexées sur 8 bits.

+L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le [PNG](#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 [profondeur de couleur](), alors que le GIF animé ne supporte que des [couleurs indexées](https://en.wikipedia.org/wiki/Indexed_color) sur 8 bits. -

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, indicateur d'activité, et autres séquences animées. Par exemple, l'APNG est l'un des formats pris en charge lors de la création d'autocollants animés 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.

+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, [indicateur d'activité](https://fr.wikipedia.org/wiki/Indicateur_d%27activit%C3%A9), et autres séquences animées. Par exemple, l'APNG est [l'un des formats pris en charge lors de la création d'autocollants animés](https://developer.apple.com/stickers/) 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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/apng
Extention(s) de fichier(s).apng
Spécificationwiki.mozilla.org/APNG_Specification
Compatibilité des navigateursChrome 59, Edge 12, Firefox 3, Opera 46, Safari 8
Dimensions maximales2 147 483 647×2 147 483 647 pixels
Modes de couleur supportés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8, et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4, et 8Chaque pixel est une valeur D-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
-
CompressionSans perte
LicenceGratuit et ouvert dans le cadre de la Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 ou plus.
Type de MIMEimage/apng
Extention(s) de fichier(s).apng
Spécification + wiki.mozilla.org/APNG_Specification +
Compatibilité des navigateursChrome 59, Edge 12, Firefox 3, Opera 46, Safari 8
Dimensions maximales2 147 483 647×2 147 483 647 pixels
Modes de couleur supportés + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8, et 16 + Chaque pixel est constitué d'une seule valeur D-bit + indiquant la luminosité du pixel en niveaux de gris. +
Vraie couleur8 et 16 + Chaque pixel est représenté par trois valeurs de D-bit + indiquant le niveau des composantes de couleur rouge, verte et + bleue. +
Couleur indexée1, 2, 4, et 8 + Chaque pixel est une valeur D-bit indiquant un index + dans une palette de couleurs qui est contenue dans un morceau + PLTE + dans le fichier APNG ; les couleurs de la palette utilisent + toutes une profondeur de 8 bits. +
Niveau de gris avec alpha8 et 16 + Chaque pixel est représenté par deux valeurs D-bit : + l'intensité du pixel en niveaux de gris et un échantillon alpha, + indiquant le degré d'opacification du pixel. +
Vraie couleur avec alpha8 et 16 + Chaque pixel est composé de quatre composantes de couleur + D-pixel : rouge, vert, bleu, et l'échantillon alpha + indiquant le degré d'opacité du pixel. +
+
CompressionSans perte
Licence + Gratuit et ouvert dans le cadre de la + Creative Commons Attribution-ShareAlike license + (CC-BY-SA) + version 3.0 ou plus. +
-

AVIF

+### AVIF -

AV1 Image File Format (AVIF) est un format open-source et sans licence commerciale qui encode des flux de bits AV1 dans un conteneur High Efficiency Image File Format (HEIF).

+AV1 Image File Format (AVIF) est un format open-source et sans licence commerciale qui encode _des flux de bits AV1 dans un conteneur High Efficiency Image File Format (HEIF)._ -

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.

+_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._ -

Ce format dispose :

+Ce format dispose : - +- 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). +- D'une meilleure compression que WebP — mediane à 50% par rapport à 30% de compression pour le même ensemble de fichiers JPG (source : [AVIF WebP Comparison](https://www.ctrl.blog/entry/webp-avif-comparison.html) (CTRL Blog)). +- D'une compression sans perte. +- D'un stockage pour les animations/multi-images (similaire aux GIF aniimés mais avec une bien meilleure compression) +- D'une prise en charge de la transparence avec un canal alpha. +- Du _High Dynamic Range_ (HDR) qui permet de stocker des images avec une plus grande largeur de contraste entre les zones les plus claires et les plus sombres. +- D'un spectre de couleurs (_gamut_) élargi. -

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.

+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. -

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 <picture> pour fournir des images alternatives au format JPEG ou PNG.

+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 [``](/fr/docs/Web/HTML/Element/picture) pour fournir des images alternatives au format [JPEG](#jpeg) ou [PNG](#png). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type MIMEimage/avif
Extension.avif
Spécification -

AV1 Image File Format (AVIF)

-
Compatibilité des navigateursChrome 85, Opera 71 et Firefox (via une préférence). -
    -
  • Pour Firefox 77 et ultérieur : image.avif.enable doit être passée à true. 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 le bug 1682995).
    • -
-
Dimensions maximums 2 147 483 647×2 147 483 647 pixels
Modes de couleurs supportés -

Voir AV1 Bitstream & Decoding Process Specification, section 6.4.2 : Color config semantics.

- -

Pour résumer de façon non-exhaustive :

- -
    -
  • Modes de couleur : YUV444, YUV422, YUV420
    • -
  • Niveau de gris : YUV400
    • -
  • Bits : 8/10/12 bits
    • -
  • Prise en charge du canal alpha
    • -
  • Prise en charge des profils ICC
    • -
  • Prise en charge NCLX : sRGB, sRGB linéaire, Rec2020 linéaire, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3, etc.
    • -
  • Prise en charge des tuiles
    • -
-
CompressionAvec ou sans perte.
LicencePas de licence commerciale. Informations disponibles sur https://aomedia.org/license/ .
Type MIMEimage/avif
Extension.avif
Spécification +

+ AV1 Image File Format (AVIF) +

+
Compatibilité des navigateurs + Chrome 85, Opera 71 et Firefox (via + une préférence). +
    +
  • + Pour Firefox 77 et ultérieur : image.avif.enable doit + être passée à true. 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 + le bug 1682995). +
    • +
+
Dimensions maximums2 147 483 647×2 147 483 647 pixels
Modes de couleurs supportés +

+ Voir + AV1 Bitstream & Decoding Process Specification, section 6.4.2 : Color config semantics. +

+

Pour résumer de façon non-exhaustive :

+
    +
  • Modes de couleur : YUV444, YUV422, YUV420
    • +
  • Niveau de gris : YUV400
    • +
  • Bits : 8/10/12 bits
    • +
  • Prise en charge du canal alpha
    • +
  • Prise en charge des profils ICC
    • +
  • + Prise en charge NCLX : sRGB, sRGB linéaire, Rec2020 linéaire, PQ + Rec2020, HLG Rec2020, PQ P3, HLG P3, etc. +
    • +
  • Prise en charge des tuiles
    • +
+
CompressionAvec ou sans perte.
Licence + Pas de licence commerciale. Informations disponibles sur + https://aomedia.org/license/ + . +
-

BMP (Bitmap file)

+### BMP (Bitmap file) -

Le type de fichier BMP (image Bitmap) 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.

+Le type de fichier BMP **(image Bitmap)** 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. -
-

Attention : Vous devriez généralement éviter d'utiliser le BMP pour le contenu des sites web, car ce n'est pas une utilisation généralement acceptée du format.

-
+> **Attention :** Vous devriez généralement éviter d'utiliser le BMP pour le contenu des sites web, car ce n'est pas une utilisation généralement acceptée du format. -

BMP soutient théoriquement une variété de représentations de données internes. La forme la plus simple, et la plus couramment utilisée, de fichier BMP est une image tramée non compressée, chaque pixel occupant 3 octets représentant ses composantes rouge, verte et bleue, et chaque ligne étant rembourrée avec des 0x00 octets à un multiple de 4 octets de large.

+BMP soutient théoriquement une variété de représentations de données internes. La forme la plus simple, et la plus couramment utilisée, de fichier BMP est une image tramée non compressée, chaque pixel occupant 3 octets représentant ses composantes rouge, verte et bleue, et chaque ligne étant rembourrée avec des `0x00` octets à un multiple de 4 octets de large. -

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).

+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). -

Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format JPEG ou PNG dans le fichier BMP.

+Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format [JPEG](#jpeg) ou [PNG](#png) dans le fichier BMP. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/bmp
Extension(s) de fichier(s).bmp
SpécificationAucune spécification ; toutefois, Microsoft fournit une documentation générale sur le format à l'adresse docs.microsoft.com/fr/windows/desktop/gdi/bitmap-storage
Compatibilité des navigateursToutes versions de Chrome, Edge, Firefox, Internet Explorer, Opera, et Safari
Dimensions maximalesSoit 32 767×32 767 ou 2 147 483 647×2 147 483 647 pixels, selon la version du format
Modes de couleur supportés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de gris1Chaque bit représente un seul pixel, qui peut être noir ou blanc.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de D bits.
Couleur indexée2, 4, et 8Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de D bits.
-
CompressionPlusieurs méthodes de compression sont prises en charge, notamment les algorithmes avec ou sans perte
LicenceCouvert 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 (.wmf).
Type de MIMEimage/bmp
Extension(s) de fichier(s).bmp
Spécification + Aucune spécification ; toutefois, Microsoft fournit une documentation + générale sur le format à l'adresse + docs.microsoft.com/fr/windows/desktop/gdi/bitmap-storage +
Compatibilité des navigateurs + Toutes versions de Chrome, Edge, Firefox, Internet Explorer, Opera, et + Safari +
Dimensions maximales + Soit 32 767×32 767 ou 2 147 483 647×2 147 483 647 pixels, selon la + version du format +
Modes de couleur supportés + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de gris1 + Chaque bit représente un seul pixel, qui peut être noir ou + blanc. +
Vraie couleur8 et 16 + Chaque pixel est représenté par trois valeurs représentant les + composantes de couleur rouge, verte et bleue ; chacune d'entre + elles est constituée de D bits. +
Couleur indexée2, 4, et 8 + Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, + qui sert d'index dans la table des couleurs. +
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16 + Chaque pixel est représenté par quatre valeurs représentant les + composantes de couleur rouge, verte, bleue et alpha ; chacune + d'entre elles est constituée de D bits. +
+
Compression + Plusieurs méthodes de compression sont prises en charge, notamment les + algorithmes avec ou sans perte +
Licence + 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 (.wmf). +
-

GIF (Graphics Interchange Format)

+### GIF (Graphics Interchange Format) -

En 1987, le fournisseur de services en ligne CompuServe a introduit le "GIF" (Graphics Interchange Format) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise l'algorithme 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 HTML, ainsi que XBM.

+En 1987, le fournisseur de services en ligne CompuServe a introduit le **["GIF"](https://fr.wikipedia.org/wiki/Graphics_Interchange_Format)** (**Graphics Interchange Format**) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise l'algorithme [Lempel-Ziv-Welch (LZW)](https://fr.wikipedia.org/wiki/Lempel-Ziv-Welch) 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 [HTML](/fr/docs/Glossary/HTML), ainsi que [XBM](#xbm). -

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 diffusion d'erreur(dithering). Il est techniquement possible 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.

+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 [diffusion d'erreur(_dithering_)](https://fr.wikipedia.org/wiki/Diffusion_d%27erreur). Il est [techniquement possible](https://gif.ski/) 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. -

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.

+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. -

Le GIF permet une animation simple, dans laquelle, après une première image de taille réelle, une série d'images reflétant les parties de l'image qui changent avec chaque image est fournie.

+Le GIF permet une animation simple, dans laquelle, après une première image de taille réelle, une série d'images reflétant les parties de l'image qui changent avec chaque image est fournie. -

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.

+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. -

Une autre caractéristique populaire du GIF est la prise en charge de l'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.

+Une autre caractéristique populaire du GIF est la prise en charge de l'[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. -

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 PNG pour les images fixes sans perte et indexées, et devrait envisager d'utiliser APNG pour les séquences d'animation sans perte.

+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 [PNG](#png) pour les images fixes sans perte et indexées, et devrait envisager d'utiliser [APNG](#apng) pour les séquences d'animation sans perte. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/gif
Extention(s) du fichier(s).gif
SpécificationSpécification GIF87a
- Spécification GIF89a
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Dimensions maximales65 536×65 536 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode couleurBits par composante (D)Description
Niveau de grisn/aLe GIF n'inclut pas un format de niveaux de gris spécifique.
Vraie couleurn/aLe GIF ne prend pas en charge les pixels en couleurs réelles.
Couleur indexée8Chaque couleur d'une palette GIF est définie par 8 bits de rouge, de vert et de bleu (24 bits au total par pixel).
Niveau de gris avec alphan/aLe GIF ne fournit pas de format de niveaux de gris spécifique.
Vraie couleur avec alphan/aLe GIF ne prend pas en charge les pixels en couleurs réelles.
-
CompressionSans perte (LZW)
LicenceAlors 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.
Type de MIMEimage/gif
Extention(s) du fichier(s).gif
Spécification + Spécification GIF87a
Spécification GIF89a +
Compatibilité des navigateurs + Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera, + and Safari +
Dimensions maximales65 536×65 536 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode couleurBits par composante (D)Description
Niveau de grisn/a + Le GIF n'inclut pas un format de niveaux de gris spécifique. +
Vraie couleurn/a + Le GIF ne prend pas en charge les pixels en couleurs réelles. +
Couleur indexée8 + Chaque couleur d'une palette GIF est définie par 8 bits de + rouge, de vert et de bleu (24 bits au total par pixel). +
Niveau de gris avec alphan/a + Le GIF ne fournit pas de format de niveaux de gris spécifique. +
Vraie couleur avec alphan/a + Le GIF ne prend pas en charge les pixels en couleurs réelles. +
+
CompressionSans perte (LZW)
Licence + 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. +
-

ICO (Microsoft Windows icon)

+### ICO (Microsoft Windows icon) -

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é favicon.ico dans le répertoire racine d'un site web pour spécifier un favicon — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile.

+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é `favicon.ico` dans le répertoire racine d'un site web pour spécifier un **[favicon](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter_des_ic%c3%b4nes_personnalis%c3%a9es_%c3%a0_un_site)** — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile. -

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 BMP sans l'en-tête du fichier, soit une image 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.

+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 [BMP](#bmp) sans l'en-tête du fichier, soit une image [PNG](#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. -
-

Attention : 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 <link>, comme décrit dans cette section.

-
+> **Attention :** 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 [``](/fr/docs/Web/HTML/Element/link), comme décrit dans [cette section](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter_des_ic%C3%B4nes_personnalis%C3%A9es_%C3%A0_un_site). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/vnd.microsoft.icon (officiel), image/x-icon (utilisé par Microsoft)
Extention(s) de fichier(s).ico
Spécification
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari
Dimensions maximales256×256 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Icônes au format BMP
Mode de couleurBits par composante (D)Description
Niveau de gris1Chaque bit représente un seul pixel, qui peut être noir ou blanc.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de D bits.
Couleur indexée2, 4, et 8Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de D bits.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Icônes au format PNG
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4 et 8Chaque pixel est une valeur de D-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau de PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
-
CompressionLes 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.
Licence—
Type de MIME + image/vnd.microsoft.icon (officiel), + image/x-icon (utilisé par Microsoft) +
Extention(s) de fichier(s).ico
Spécification
Compatibilité des navigateurs + Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera + et Safari +
Dimensions maximales256×256 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Icônes au format BMP +
Mode de couleurBits par composante (D)Description
Niveau de gris1 + Chaque bit représente un seul pixel, qui peut être noir ou + blanc. +
Vraie couleur8 et 16 + Chaque pixel est représenté par trois valeurs représentant les + composantes de couleur rouge, verte et bleue ; chacune d'entre + elles est constituée de D bits. +
Couleur indexée2, 4, et 8 + Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, + qui sert d'index dans la table des couleurs. +
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16 + Chaque pixel est représenté par quatre valeurs représentant les + composantes de couleur rouge, verte, bleue et alpha ; chacune + d'entre elles est constituée de D bits. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Icônes au format PNG +
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16 + Chaque pixel est constitué d'une seule valeur D-bit + indiquant la luminosité du pixel en niveaux de gris. +
Vraie couleur8 et 16 + Chaque pixel est représenté par trois valeurs de D-bit + indiquant le niveau des composantes de couleur rouge, verte et + bleue. +
Couleur indexée1, 2, 4 et 8 + Chaque pixel est une valeur de D-bit indiquant un index + dans une palette de couleurs qui est contenue dans un morceau de + PLTE + dans le fichier APNG ; les couleurs de la palette utilisent + toutes une profondeur de 8 bits. +
Niveau de gris avec alpha8 et 16 + Chaque pixel est représenté par deux valeurs D-bit : + l'intensité du pixel en niveaux de gris et un échantillon alpha, + indiquant le degré d'opacification du pixel. +
Vraie couleur avec alpha8 et 16 + Chaque pixel est composé de quatre composantes de couleur + D-pixel : rouge, vert, bleu, et l'échantillon alpha + indiquant le degré d'opacité du pixel. +
+
Compression + 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. +
Licence—
-

JPEG (Joint Photographic Experts Group image)

+### JPEG (Joint Photographic Experts Group image) -

Le JPEG (typiquement prononcé "j-peg") 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.

+Le [JPEG](/fr/docs/Glossary/jpeg) (typiquement prononcé "**j-peg**") 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. -

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 File Interchange Format) décrit le format des fichiers que nous considérons comme des images "JPEG".

+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 **F**ile **I**nterchange **F**ormat) décrit le format des fichiers que nous considérons comme des images "JPEG". - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/jpeg
Extentions(s) de fichier(s).jpg, .jpeg, .jpe, .jif, .jfif
Spécificationjpeg.org/jpeg/
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari
Dimensions maximales65 535×65 535 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de grisn/aLe JPEG n'a pas de mode d'échelle de gris distinct.
Vraie couleur8Chaque pixel est décrit par les composantes de couleur rouge, bleue et verte, chacune d'entre elles étant composée de 8 bits.
Couleur indexéen/aLe JPEG n'offre pas de mode couleur indexé.
Niveau de gris avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
Vraie couleur avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
-
CompressionSans perte; sur la base de la transformée en cosinus discrète
LicenceDepuis le 27 octobre 2006, tous les brevets américains ont expiré.
Type de MIMEimage/jpeg
Extentions(s) de fichier(s) + .jpg, .jpeg, .jpe, + .jif, .jfif +
Spécificationjpeg.org/jpeg/
Compatibilité des navigateurs + Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera + et Safari +
Dimensions maximales65 535×65 535 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de grisn/aLe JPEG n'a pas de mode d'échelle de gris distinct.
Vraie couleur8 + Chaque pixel est décrit par les composantes de couleur rouge, + bleue et verte, chacune d'entre elles étant composée de 8 bits. +
Couleur indexéen/aLe JPEG n'offre pas de mode couleur indexé.
Niveau de gris avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
Vraie couleur avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
+
Compression + Sans perte; sur la base de la + transformée en cosinus discrète +
Licence + Depuis le 27 octobre 2006, tous les brevets américains ont expiré. +
-

PNG (Portable Network Graphics)

+### PNG (Portable Network Graphics) -

Le PNG (prononcé "png") 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 GIF, ainsi qu'une transparence alpha complète.

+Le [PNG](/fr/docs/Glossary/PNG) (prononcé "**png**") 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 [GIF](#gif), ainsi qu'une transparence alpha complète. -

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.

+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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/png
Extension(s) de fichier(s).png
Spécificationw3.org/TR/PNG
Comptabilité des navigateurs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support de base112153.5.1 (Presto)
- 15 (Blink)		1
Canal Alpha112156 (Presto)
- Toute (Blink)		1
Correction gammanonoui181cassé
Correction des couleursnonoui39nonnon
Entrelacementnon?1cassé3.5.1non
-
Dimensions maximales2 147 483 647×2 147 483 647 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4 et 8Chaque pixel est une valeur de bit D indiquant un index dans une palette de couleurs qui est contenue dans un morceau de PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
-
CompressionCouleur sans perte, éventuellement indexée comme le GIF
Licence©2003 W3C® (MIT, ERCIM, Keio), Tous Droits Réservés. Les règles du W3C en matière de responsabilité, de marque commerciale, d'utilisation des documents et de licences de logiciels s'appliquent. Pas de brevets porteurs de royalties connus.
Type de MIMEimage/png
Extension(s) de fichier(s).png
Spécificationw3.org/TR/PNG
Comptabilité des navigateurs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support de base112153.5.1 (Presto)
15 (Blink)		1
Canal Alpha112156 (Presto)
Toute (Blink)		1
Correction gammanonoui181cassé
Correction des couleursnonoui39nonnon
Entrelacementnon?1cassé3.5.1non
+
Dimensions maximales2 147 483 647×2 147 483 647 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16 + Chaque pixel est constitué d'une seule valeur D-bit + indiquant la luminosité du pixel en niveaux de gris. +
Vraie couleur8 et 16 + Chaque pixel est représenté par trois valeurs de D-bit + indiquant le niveau des composantes de couleur rouge, verte et + bleue. +
Couleur indexée1, 2, 4 et 8 + Chaque pixel est une valeur de bit D indiquant un index + dans une palette de couleurs qui est contenue dans un morceau de + PLTE + dans le fichier APNG ; les couleurs de la palette utilisent + toutes une profondeur de 8 bits. +
Niveau de gris avec alpha8 et 16 + Chaque pixel est représenté par deux valeurs D-bit : + l'intensité du pixel en niveaux de gris et un échantillon alpha, + indiquant le degré d'opacification du pixel. +
Vraie couleur avec alpha8 et 16 + Chaque pixel est composé de quatre composantes de couleur + D-pixel : rouge, vert, bleu, et l'échantillon alpha + indiquant le degré d'opacité du pixel. +
+
CompressionCouleur sans perte, éventuellement indexée comme le GIF
Licence + ©2003 W3C® (MIT, ERCIM, + Keio), Tous Droits Réservés. Les + règles du W3C en matière de + responsabilité, de + marque commerciale, d'utilisation des documents + et de + licences de logiciels + s'appliquent. Pas de brevets porteurs de royalties connus. +
-

SVG (Scalable Vector Graphics)

+### SVG (Scalable Vector Graphics) -

Le SVG est une base XML pour le format d'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.

+Le SVG est une base [XML](/fr/docs/Glossary/XML) pour le format d'[image vectorielle](https://fr.wikipedia.org/wiki/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. -

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 :

+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 : -
<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>
+```html + + + +``` -

Le SVG peut être utilisé dans le contenu du web de deux façons :

+Le SVG peut être utilisé dans le contenu du web de deux façons : -
    -
  1. Vous pouvez directement écrire l'élément <svg> dans le HTML, contenant des éléments SVG pour dessiner l'image.
    2. -
  2. Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments <img> et <image>, les propriétés background-image du CSS, etc.
    3. -
+1. Vous pouvez directement écrire l'élément [``](/fr/docs/Web/HTML/Element/svg) dans le HTML, contenant des [éléments SVG](/fr/docs/Web/SVG/Element) pour dessiner l'image. +2. Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments [``](/fr/docs/Web/HTML/Element/Img) et [``](/fr/docs/Web/HTML/Element/image), les propriétés [`background-image`](/fr/docs/Web/CSS/background-image) du CSS, etc. -

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.

+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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/svg+xml
Extension(s) de fichier(s).svg
Specificationw3.org/TR/SVG2
Compatibilité des navigateurs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Le support du SVG4123910 (Presto)
- 15 (Blink)		3.2
SVG comme image (<img> etc)28124910 (Presto)
- 15 (Blink)		9
-
Dimensions maximalesIllimité
Modes de couleur pris en chargeLes couleurs en SVG sont spécifiées à l'aide de syntaxe de couleur CSS.
CompressionLa source SVG peut être compressée pendant le transit en utilisant les techniques de compression HTTP, ou sur disque en tant que fichier .svgz.
Licence©2018 W3C® (MIT, ERCIM, Keio, Beihang), Tous Droits Réservés. Les règles du W3C en matière de responsabilité, de marque commerciale, d'utilisation des documents et de licences de logiciels s'appliquent. Pas de brevets porteurs de royalties connus.
Type de MIMEimage/svg+xml
Extension(s) de fichier(s).svg
Specificationw3.org/TR/SVG2
Compatibilité des navigateurs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Le support du SVG4123910 (Presto)
15 (Blink)		3.2
+ SVG comme image (<img> + etc) + 28124910 (Presto)
15 (Blink)		9
+
Dimensions maximalesIllimité
Modes de couleur pris en charge + Les couleurs en SVG sont spécifiées à l'aide de + syntaxe de couleur CSS. +
Compression + La source SVG peut être compressée pendant le transit en utilisant les + techniques de + compression HTTP, ou sur + disque en tant que fichier .svgz. +
Licence + ©2018 W3C® (MIT, ERCIM, + Keio, + Beihang), Tous Droits Réservés. + Les règles du W3C en matière de + responsabilité, de + marque commerciale, d'utilisation des documents + et de + licences de logiciels + s'appliquent. Pas de brevets porteurs de royalties connus. +
-

TIFF (Tagged Image File Format)

+### TIFF (Tagged Image File Format) -

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.

+[TIFF](https://fr.wikipedia.org/wiki/Tagged_Image_File_Format) 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. -

Chaque valeur d'un fichier TIFF est spécifiée à l'aide de sa balise (indiquant le type d'information dont il s'agit, comme la largeur de l'image) et de son type (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, ImageWidth, est stockée à l'aide de la balise 0x0100 et est un tableau à une entrée. En précisant le type 3 (SHORT), la valeur de ImageWidth est stockée comme une valeur de 16 bits :

+Chaque valeur d'un fichier TIFF est spécifiée à l'aide de sa **balise** (indiquant le type d'information dont il s'agit, comme la largeur de l'image) et de son **type** (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, `ImageWidth`, est stockée à l'aide de la balise `0x0100` et est un tableau à une entrée. En précisant le type 3 (`SHORT`), la valeur de `ImageWidth` est stockée comme une valeur de 16 bits : - - - - - - - - - - - - - - - - - -
BaliseTypeTailleValeur
0x0100
- (ImageWidth)		0x0003
- (SHORT)		0x00000001
- (1 entée)		0x0280
- (640 pixels)
+| Balise | Type | Taille | Valeur | +| ----------------------- | ------------------ | ---------------------- | --------------------- | +| `0x0100` (`ImageWidth`) | `0x0003` (`SHORT`) | `0x00000001` (1 entée) | `0x0280` (640 pixels) | -

La spécification du type 4 (LONG) enregistre la largeur comme une valeur de 32 bits :

+La spécification du type 4 (`LONG`) enregistre la largeur comme une valeur de 32 bits : - - - - - - - - - - - - - - - -
BaliseTypeTailleValeur
0x0100
- (ImageWidth)		0x0004
- (LONG)		0x00000001
- (1 entry)		0x00000280
- (640 pixels)
+| Balise | Type | Taille | Valeur | +| ----------------------- | ----------------- | ---------------------- | ------------------------- | +| `0x0100` (`ImageWidth`) | `0x0004` (`LONG`) | `0x00000001` (1 entry) | `0x00000280` (640 pixels) | -

Un seul fichier TIFF peut contenir plusieurs images ; il peut être utilisé pour représenter des documents de plusieurs pages, par exemple (comme un document de plusieurs pages scanné ou une télécopie reçue). Toutefois, un logiciel qui lit les fichiers TIFF n'est nécessaire que pour prendre en charge la première image.

+Un seul fichier TIFF peut contenir plusieurs images ; il peut être utilisé pour représenter des documents de plusieurs pages, par exemple (comme un document de plusieurs pages scanné ou une télécopie reçue). Toutefois, un logiciel qui lit les fichiers TIFF n'est nécessaire que pour prendre en charge la première image. -

Le TIFF prend en charge divers espaces de couleur, et pas seulement le RGB. Il s'agit notamment de CMJN, YCbCr et autres, ce qui fait du TIFF un bon choix pour le stockage d'images destinées à la presse écrite, au cinéma ou à la télévision.

+Le TIFF prend en charge divers espaces de couleur, et pas seulement le RGB. Il s'agit notamment de CMJN, YCbCr et autres, ce qui fait du TIFF un bon choix pour le stockage d'images destinées à la presse écrite, au cinéma ou à la télévision. -

Il y a longtemps, certains navigateurs prenaient en charge les images TIFF dans le contenu Web ; aujourd'hui, cependant, vous devez utiliser des bibliothèques spéciales ou des modules complémentaires de navigateur pour le faire. Les fichiers TIFF ne sont donc pas utiles dans le contexte du contenu web, mais il est courant de fournir des fichiers TIFF téléchargeables lors de la distribution de photos et d'autres œuvres d'art destinées à être modifiées ou imprimées avec précision.

+Il y a longtemps, certains navigateurs prenaient en charge les images TIFF dans le contenu Web ; aujourd'hui, cependant, vous devez utiliser des bibliothèques spéciales ou des modules complémentaires de navigateur pour le faire. Les fichiers TIFF ne sont donc pas utiles dans le contexte du contenu web, mais il est courant de fournir des fichiers TIFF téléchargeables lors de la distribution de photos et d'autres œuvres d'art destinées à être modifiées ou imprimées avec précision. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/tiff
Extension(s) de fichier(s).tif, .tiff
Spécificationadobe.io/open/standards/TIFF.html
Compatibilité des navigateursAucun 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é
Dimensions maximales4 294 967 295×4 294 967 295 pixels (théoriquement)
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Bilevel1Un TIFF à deux niveaux stocke 8 bits dans chaque octet, un bit par pixel. Le champ PhotometricInterpretation indique lequel de 0 et 1 est noir et lequel est blanc.
Niveaux de gris4 et 8Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8Toutes les images RVB en couleurs réelles sont stockées en utilisant 8 bits de rouge, de vert et de bleu.
Couleur indexée4 et 8Chaque pixel est un index dans un enregistrement ColorMap, qui définit les couleurs utilisées dans l'image. La carte des couleurs répertorie toutes les valeurs de rouge, puis toutes les valeurs de vert, puis toutes les valeurs de bleu (plutôt que rgb, rgb, rgb...).
Niveaux de gris avec alpha4 et 8L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ SamplesPerPixel, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.
Vraie couleur avec alpha8L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ SamplesPerPixel, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.
-
CompressionLa 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.
LicenceAucune licence n'est requise (à l'exception de celles associées aux bibliothèques que vous pourriez utiliser) ; tous les brevets connus ont expiré.
Type de MIMEimage/tiff
Extension(s) de fichier(s).tif, .tiff
Spécification + adobe.io/open/standards/TIFF.html +
Compatibilité des navigateurs + 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é +
Dimensions maximales4 294 967 295×4 294 967 295 pixels (théoriquement)
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Bilevel1 + Un TIFF à deux niveaux stocke 8 bits dans chaque octet, un bit + par pixel. Le champ + PhotometricInterpretation indique lequel de 0 et 1 + est noir et lequel est blanc. +
Niveaux de gris4 et 8 + Chaque pixel est constitué d'une seule valeur D-bit + indiquant la luminosité du pixel en niveaux de gris. +
Vraie couleur8 + Toutes les images RVB en couleurs réelles sont stockées en + utilisant 8 bits de rouge, de vert et de bleu. +
Couleur indexée4 et 8 + Chaque pixel est un index dans un enregistrement + ColorMap, qui définit les couleurs utilisées dans + l'image. La carte des couleurs répertorie toutes les valeurs de + rouge, puis toutes les valeurs de vert, puis toutes les valeurs + de bleu (plutôt que rgb, rgb, + rgb...). +
Niveaux de gris avec alpha4 et 8 + L'information alpha est ajoutée en spécifiant qu'il y a plus de + 3 échantillons par pixel dans le champ + SamplesPerPixel, et en indiquant le type d'alpha (1 + pour une composante alpha pré-multipliée associée, et 2 pour une + alpha non associée (une couche séparée) ; cependant, les canaux + alpha sont rarement utilisés dans les fichiers TIFF et peuvent + ne pas être pris en charge par le logiciel de l'utilisateur. +
Vraie couleur avec alpha8 + L'information alpha est ajoutée en spécifiant qu'il y a plus de + 3 échantillons par pixel dans le champ + SamplesPerPixel, et en indiquant le type d'alpha (1 + pour une composante alpha pré-multipliée associée, et 2 pour une + alpha non associée (une couche séparée) ; cependant, les canaux + alpha sont rarement utilisés dans les fichiers TIFF et peuvent + ne pas être pris en charge par le logiciel de l'utilisateur. +
+
Compression + 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. +
Licence + Aucune licence n'est requise (à l'exception de celles associées aux + bibliothèques que vous pourriez utiliser) ; tous les brevets connus ont + expiré. +
-

WebP

+### WebP -

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.

+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. -

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 ANIM, qui décrit l'animation, et le fragment ANMF, qui représente une image d'une séquence d'animation. Le bouclage est pris en charge.

+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 `ANIM`, qui décrit l'animation, et le fragment `ANMF`, qui représente une image d'une séquence d'animation. Le bouclage est pris en charge. -

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 JPEG ou PNG, par exemple avec l'élément <picture>.

+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 [JPEG](#jpeg) ou [PNG](#png), par exemple avec [l'élément ``](/fr/docs/Web/HTML/Element/picture). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/webp
Extention(s) de fichier(s).webp
Spécification -

Spécification des conteneurs RIFF (en)
- RFC 6386 - Format des données VP8 et guide de décodage (en) (encodage avec perte)
- Spécification du flux binaire sans perte WebP (en)

-
Compatibilité des navigateurs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Supprt de WebP avec perte171865non11.10 (Presto)
- 15 (Blink)		non
WebP sans perte23
- 25 sur Android		1865non12.10 (Presto)
- 15 (Blink)		non
Animation321865non19 (Blink)non
-
Dimensions maximales16 383×16 383 pixels
Modes de couleur pris en chargeWebP avec perte stocke l'image au format 8 bits Y'CbCr 4:2:0 (YUV420). WebP sans perte utilise la couleur ARGB 8 bits, chaque composant prenant 8 bits pour un total de 32 bits par pixel.
CompressionSans perte (Huffman, LZ77, ou codes de cache couleur) ou avec perte (VP8).
LicenceAucune licence n'est requise ; le code source est librement accessible.
Type de MIMEimage/webp
Extention(s) de fichier(s).webp
Spécification +

+ Spécification des conteneurs RIFF + (en)
RFC 6386 - Format des données VP8 et guide de décodage + (en) (encodage avec perte)
Spécification du flux binaire sans perte WebP + (en) +

+
Compatibilité des navigateurs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Supprt de WebP avec perte171865non11.10 (Presto)
15 (Blink)		non
WebP sans perte23
25 sur Android		1865non12.10 (Presto)
15 (Blink)		non
Animation321865non19 (Blink)non
+
Dimensions maximales16 383×16 383 pixels
Modes de couleur pris en charge + WebP avec perte stocke l'image au format 8 bits Y'CbCr 4:2:0 (YUV420). + WebP sans perte utilise la couleur ARGB 8 bits, chaque composant prenant + 8 bits pour un total de 32 bits par pixel. +
Compression + Sans perte (Huffman, LZ77, ou codes de cache couleur) ou avec perte + (VP8). +
Licence + Aucune licence n'est requise ; le code source est librement accessible. +
-

XBM (X Window System Bitmap file)

+### XBM (X Window System Bitmap file) -

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.

+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. -

XBM utilise un extrait de code C pour représenter le contenu de l'image sous la forme d'un tableau d'octets. Chaque image se compose de 2 à 4 directives #define, fournissant la largeur et la hauteur de la carte de bits (et éventuellement le hotspot, si l'image est conçue comme un curseur), suivies d'un tableau de unsigned char, où chaque valeur contient 8 pixels monochromes de 1 bit.

+XBM utilise un extrait de code C pour représenter le contenu de l'image sous la forme d'un tableau d'octets. Chaque image se compose de 2 à 4 directives `#define`, fournissant la largeur et la hauteur de la carte de bits (et éventuellement le hotspot, si l'image est conçue comme un curseur), suivies d'un tableau de `unsigned char`, où chaque valeur contient 8 pixels monochromes de 1 bit. -

L'image doit être un multiple de 8 pixels de large. Par exemple, le code suivant représente une image XBM de 8 pixels sur 8 pixels, ces pixels étant disposés en damier noir et blanc :

+L'image doit être un multiple de 8 pixels de large. Par exemple, le code suivant représente une image XBM de 8 pixels sur 8 pixels, ces pixels étant disposés en damier noir et blanc : -
#define square8_width 8
+```cpp
+#define square8_width 8
 #define square8_height 8
 static unsigned char square8_bits[] = {
   0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
 };
-
+``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/xbm, image-xbitmap
Extension(s) de fichier(s).xbm
SpécificationAucune
Compatibilité des navigateursFirefox 1 à 3.5, Internet Explorer 1 à 5
Dimensions maximalesIllimitée
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composantesDescription
Niveaux de gris1Chaque octet contient huit pixels de 1 bit.
Vraie couleurn/an/a
Couleur indexéen/an/a
Niveaux de gris avec alphan/an/a
Vraie couleur avec alphan/an/a
-
CompressionSans pertes
LicenceOpen source
Type de MIMEimage/xbm, image-xbitmap
Extension(s) de fichier(s).xbm
SpécificationAucune
Compatibilité des navigateursFirefox 1 à 3.5, Internet Explorer 1 à 5
Dimensions maximalesIllimitée
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composantesDescription
Niveaux de gris1Chaque octet contient huit pixels de 1 bit.
Vraie couleurn/an/a
Couleur indexéen/an/a
Niveaux de gris avec alphan/an/a
Vraie couleur avec alphan/an/a
+
CompressionSans pertes
LicenceOpen source
-

Choisir un format d'image

+## Choisir un format d'image -

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.

+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. -

Photographies

+### Photographies -

Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de JPEG et 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 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é.

+Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de [JPEG](#jpeg) et [WebP](#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 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é. - - - - - - - - - - - - - -
Meilleurs choixChoix de secours
WebP et JPEGJPEG
+| Meilleurs choix | Choix de secours | +| --------------- | ---------------- | +| WebP et JPEG | JPEG | -

Icônes

+### Icônes -

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).

+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). -

Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager 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.

+Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager [SVG](#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. - - - - - - - - - - - -
Meilleurs choixChoix de secours
SVG, WebP sans perte, ou PNGPNG
+| Meilleurs choix | Choix de secours | +| ---------------------------- | ---------------- | +| SVG, WebP sans perte, ou PNG | PNG | -

Captures d'écran

+### Captures d'écran -

À 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.

+À 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. -

Le format PNG est probablement le plus adapté, mais le format WebP sans perte est sans doute mieux compressé.

+Le format PNG est probablement le plus adapté, mais le format WebP sans perte est sans doute mieux compressé. - - - - - - - - - - - -
Meilleur choixChoix de secours
WebP sans perte ou PNG ;
- JPEG si les artefacts de compression ne sont pas un problème		PNG ou JPEG ;
- GIF pour les captures d'écran à faible nombre de couleurs
+| Meilleur choix | Choix de secours | +| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| WebP sans perte ou PNG ; JPEG si les artefacts de compression ne sont pas un problème | PNG ou JPEG ; GIF pour les captures d'écran à faible nombre de couleurs | -

Diagrammes, dessins et diagrammes

+### Diagrammes, dessins et diagrammes -

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.

+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. - - - - - - - - - - - -
Meilleur choixChoix de secours
SVGPNG
+| Meilleur choix | Choix de secours | +| -------------- | ---------------- | +| [SVG](#svg) | [PNG](#png) | -

Fournir des solutions de repli en matière d'image

+## Fournir des solutions de repli en matière d'image -

Alors que l'élément HTML standard <img> ne supporte pas les retours de compatibilité pour les images, l'élément <picture> le fait. <picture> est utilisé comme enveloppe pour un certain nombre d'éléments <source>, chacun spécifiant une version de l'image dans un format différent ou sous des conditions @media, ainsi qu'un élément <img> qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible".

+Alors que l'élément HTML standard [``](/fr/docs/Web/HTML/Element/Img) ne supporte pas les retours de compatibilité pour les images, l'élément [``](/fr/docs/Web/HTML/Element/picture) le fait. `` est utilisé comme enveloppe pour un certain nombre d'éléments [``](/fr/docs/Web/HTML/Element/Source), chacun spécifiant une version de l'image dans un format différent ou sous des [conditions @media](/fr/docs/Web/CSS/@media), ainsi qu'un élément `` qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible". -

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 :

+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 : -
<picture>
-  <source srcset="diagram.svg" type="image/svg+xml">
-  <source srcset="diagram.png" type="image/png">
-  <img src="diagram.gif" width="620" height="540"
-       alt="Diagramme montrant les canaux de données">
-</picture>
-
+```html + + + + Diagramme montrant les canaux de données + +``` -

Vous pouvez spécifier autant de <source>s que vous le souhaitez, bien qu'il vous suffise généralement de 2 ou 3.

+Vous pouvez spécifier autant de ``s que vous le souhaitez, bien qu'il vous suffise généralement de 2 ou 3. -

Voir aussi

+## Voir aussi - +- [Guide des types et formats de médias](/fr/docs/Web/Media/Formats) +- [Technologies media Web](/fr/docs/Web/Media) +- [Guide des codecs vidéo du Web](/fr/docs/Web/Media/Formats/Video_codecs) +- Les éléments [HTML](/fr/docs/Glossary/HTML) [``](/fr/docs/Web/HTML/Element/Img) et [``](/fr/docs/Web/HTML/Element/picture) +- La propriété CSS [`background-image`](/fr/docs/Web/CSS/background-image) +- Le constructeur [`Image()`](/fr/docs/Web/API/Image) et l'interface [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) diff --git a/files/fr/web/media/formats/index.md b/files/fr/web/media/formats/index.md index aac9573135..af13d7dd92 100644 --- a/files/fr/web/media/formats/index.md +++ b/files/fr/web/media/formats/index.md @@ -20,61 +20,51 @@ tags: - formats translation_of: Web/Media/Formats --- -

{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}

+{{QuickLinksWithSubpages("/fr/docs/Web/Media")}} -

Depuis presque ses débuts, le web a inclus un support pour une certaine forme de présentation visuelle des médias. À l'origine, ces capacités étaient limitées et ont été développées de manière organique, les différents navigateurs trouvant leurs propres solutions aux problèmes liés à l'inclusion d'images fixes et vidéo sur le web. Le web moderne dispose de puissantes fonctionnalités pour prendre en charge la présentation et la manipulation des médias, avec plusieurs API liées aux médias prenant en charge divers types de contenu. En général, les formats de médias pris en charge par un navigateur sont entièrement laissés à la discrétion des créateurs du navigateur, ce qui peut compliquer le travail d'un développeur web.

+Depuis presque ses débuts, le web a inclus un support pour une certaine forme de présentation visuelle des médias. À l'origine, ces capacités étaient limitées et ont été développées de manière organique, les différents navigateurs trouvant leurs propres solutions aux problèmes liés à l'inclusion d'images fixes et vidéo sur le web. Le web moderne dispose de puissantes fonctionnalités pour prendre en charge la présentation et la manipulation des médias, avec plusieurs API liées aux médias prenant en charge divers types de contenu. En général, les formats de médias pris en charge par un navigateur sont entièrement laissés à la discrétion des créateurs du navigateur, ce qui peut compliquer le travail d'un développeur web. -

Ce guide donne un aperçu des types de fichiers médias, {{Glossary("codec", "codecs")}}, et des algorithmes qui peuvent comprendre des médias utilisés sur le web. Il fournit également des informations sur la prise en charge des navigateurs pour diverses combinaisons de ceux-ci, et des suggestions pour la hiérarchisation des formats, ainsi que sur les formats qui excellent pour des types de contenu spécifiques.

+Ce guide donne un aperçu des types de fichiers médias, {{Glossary("codec", "codecs")}}, et des algorithmes qui peuvent comprendre des médias utilisés sur le web. Il fournit également des informations sur la prise en charge des navigateurs pour diverses combinaisons de ceux-ci, et des suggestions pour la hiérarchisation des formats, ainsi que sur les formats qui excellent pour des types de contenu spécifiques. -

Références

+## Références -

Images

+### Images -
-
Guide des types et formats de fichiers d'images
-
Couvre la prise en charge des types de fichiers d'images et des formats de contenu dans les principaux navigateurs web, et fournit des informations de base sur chaque type : avantages, limites et cas d'utilisation intéressant les concepteurs et les développeurs web.
-
Types de fichiers d'images pour les concepteurs de sites web
-
Des informations fondamentales sur les différents types de fichiers d'images qui peuvent être utiles aux concepteurs de sites web, y compris les meilleures pratiques et les cas d'utilisation pour chaque type, et des lignes directrices pour choisir le bon format de fichier d'image pour des types de contenu spécifiques.
-
+- [Guide des types et formats de fichiers d'images](/fr/docs/Web/Media/Formats/Types_des_images) + - : Couvre la prise en charge des types de fichiers d'images et des formats de contenu dans les principaux navigateurs web, et fournit des informations de base sur chaque type : avantages, limites et cas d'utilisation intéressant les concepteurs et les développeurs web. +- [Types de fichiers d'images pour les concepteurs de sites web](/fr/docs/Web/Media/Formats/Images_for_web_designers) + - : Des informations fondamentales sur les différents types de fichiers d'images qui peuvent être utiles aux concepteurs de sites web, y compris les meilleures pratiques et les cas d'utilisation pour chaque type, et des lignes directrices pour choisir le bon format de fichier d'image pour des types de contenu spécifiques. -

Types de fichiers médias et codecs

+### Types de fichiers médias et codecs -
-
Conteneurs de médias (types de fichiers)
-
Un guide des types de fichiers qui contiennent des données médiatiques. Certains sont spécifiques à l'audio, tandis que d'autres peuvent être utilisés pour du contenu audio ou audiovisuel combiné, comme les films. Comprend des aperçus de chacun des types de fichiers pris en charge par les principaux navigateurs web, ainsi que des informations sur la prise en charge des navigateurs et les fonctionnalités prises en charge.
-
Guide des codecs audio pour le Web
-
Un guide des codecs audio autorisés par les conteneurs de médias communs, ainsi que par les principaux navigateurs. Comprend les avantages, les limites, les principales spécifications et capacités, et des cas d'utilisation. Il couvre également le support de chaque navigateur pour l'utilisation du codec dans des conteneurs donnés.
-
Guide des codecs vidéo du Web
-
Cet article fournit des informations de base sur les codecs vidéo pris en charge par les principaux navigateurs, ainsi que sur certains codecs qui ne sont pas couramment pris en charge mais que vous pourriez quand même rencontrer. Il couvre également les capacités des codecs, leurs avantages et leurs limites, ainsi que les niveaux de prise en charge et les restrictions des navigateurs.
-
Le paramètre "codecs" dans les types de médias courants
-
Lorsque vous spécifiez le type MIME décrivant un format de média, vous pouvez fournir des détails en utilisant le paramètre codecs dans le cadre de la chaîne de type. Ce guide décrit le format et les valeurs possibles du paramètre codecs pour les types de médias les plus courants.
-
Codecs utilisés par WebRTC
-
WebRTC n'utilise pas de conteneur, mais diffuse le média encodé lui-même de pair à pair en utilisant des objets {{domxref("MediaStreamTrack")}} pour représenter chaque piste audio ou vidéo. Ce guide présente les codecs couramment utilisés avec le WebRTC.
-
+- [Conteneurs de médias (types de fichiers)](/fr/docs/Web/Media/Formats/Containers) + - : Un guide des types de fichiers qui contiennent des données médiatiques. Certains sont spécifiques à l'audio, tandis que d'autres peuvent être utilisés pour du contenu audio ou audiovisuel combiné, comme les films. Comprend des aperçus de chacun des types de fichiers pris en charge par les principaux navigateurs web, ainsi que des informations sur la prise en charge des navigateurs et les fonctionnalités prises en charge. +- [Guide des codecs audio pour le Web](/fr/docs/Web/Media/Formats/Audio_codecs) + - : Un guide des codecs audio autorisés par les conteneurs de médias communs, ainsi que par les principaux navigateurs. Comprend les avantages, les limites, les principales spécifications et capacités, et des cas d'utilisation. Il couvre également le support de chaque navigateur pour l'utilisation du codec dans des conteneurs donnés. +- [Guide des codecs vidéo du Web](/fr/docs/Web/Media/Formats/Video_codecs) + - : Cet article fournit des informations de base sur les codecs vidéo pris en charge par les principaux navigateurs, ainsi que sur certains codecs qui ne sont pas couramment pris en charge mais que vous pourriez quand même rencontrer. Il couvre également les capacités des codecs, leurs avantages et leurs limites, ainsi que les niveaux de prise en charge et les restrictions des navigateurs. +- [Le paramètre "codecs" dans les types de médias courants](/fr/docs/Web/Media/Formats/codecs_parameter) + - : Lorsque vous spécifiez le type MIME décrivant un format de média, vous pouvez fournir des détails en utilisant le paramètre `codecs` dans le cadre de la chaîne de type. Ce guide décrit le format et les valeurs possibles du paramètre `codecs` pour les types de médias les plus courants. +- [Codecs utilisés par WebRTC](/fr/docs/Web/Media/Formats/WebRTC_codecs) + - : [WebRTC](/fr/docs/Web/API/WebRTC_API) n'utilise pas de conteneur, mais diffuse le média encodé lui-même de pair à pair en utilisant des objets {{domxref("MediaStreamTrack")}} pour représenter chaque piste audio ou vidéo. Ce guide présente les codecs couramment utilisés avec le WebRTC. -

Guides

+## Guides -

Concepts

+### Concepts -
-
Concepts de l'audio numérique
-
Une introduction à la manière dont le son est converti en forme numérique et stocké pour être utilisé par les ordinateurs. Il explique les concepts de base sur la façon dont l'audio est échantillonné, ainsi que des concepts tels que le taux d'échantillonnage, les trames audio et la compression audio.
-
Concepts de la vidéo numérique
-
Un guide des concepts fondamentaux liés à la vidéo numérique telle qu'elle est utilisée sur le web, y compris des notions de base sur les formats de couleur, le sous-échantillonnage chromatique, la façon dont la perception humaine influence le codage vidéo, etc.
-
+- [Concepts de l'audio numérique](/fr/docs/Web/Media/Formats/Audio_concepts) + - : Une introduction à la manière dont le son est converti en forme numérique et stocké pour être utilisé par les ordinateurs. Il explique les concepts de base sur la façon dont l'audio est échantillonné, ainsi que des concepts tels que le taux d'échantillonnage, les trames audio et la compression audio. +- [Concepts de la vidéo numérique](/fr/docs/Web/Media/Formats/Video_concepts) + - : Un guide des concepts fondamentaux liés à la vidéo numérique telle qu'elle est utilisée sur le web, y compris des notions de base sur les formats de couleur, le sous-échantillonnage chromatique, la façon dont la perception humaine influence le codage vidéo, etc. -

Tutoriels et modes d'emploi

+### Tutoriels et modes d'emploi -
-
Apprendre : Contenu vidéo et audio
-
Ce tutoriel présente et détaille l'utilisation des médias sur le web.
-
Traiter les questions de soutien aux médias dans le contenu web
-
Dans ce guide, nous examinons comment construire un contenu web qui maximise la qualité ou les performances tout en offrant la compatibilité la plus large possible, en choisissant judicieusement les formats des médias et en proposant des solutions de repli et des formats alternatifs là où cela serait utile.
-
+- [Apprendre : Contenu vidéo et audio](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video) + - : Ce tutoriel présente et détaille l'utilisation des médias sur le web. +- [Traiter les questions de soutien aux médias dans le contenu web](/fr/docs/Web/Media/Formats/Questions_sur_le_soutien) + - : Dans ce guide, nous examinons comment construire un contenu web qui maximise la qualité ou les performances tout en offrant la compatibilité la plus large possible, en choisissant judicieusement les formats des médias et en proposant des solutions de repli et des formats alternatifs là où cela serait utile. -

Autres sujets

+## Autres sujets -
-
Capacités des médias API
-
L'API des capacités média vous permet de découvrir les capacités de codage et de décodage de l'appareil sur lequel votre application ou votre site fonctionne. Cela vous permet de prendre des décisions en temps réel sur les formats à utiliser et le moment de leur utilisation.
-
\ No newline at end of file +- [Capacités des médias API](/fr/docs/Web/API/Media_Capabilities_API) + - : L'API des capacités média vous permet de découvrir les capacités de codage et de décodage de l'appareil sur lequel votre application ou votre site fonctionne. Cela vous permet de prendre des décisions en temps réel sur les formats à utiliser et le moment de leur utilisation. diff --git a/files/fr/web/media/formats/support_issues/index.md b/files/fr/web/media/formats/support_issues/index.md index 27ebd89d54..8290229128 100644 --- a/files/fr/web/media/formats/support_issues/index.md +++ b/files/fr/web/media/formats/support_issues/index.md @@ -16,39 +16,39 @@ tags: translation_of: Web/Media/Formats/Support_issues original_slug: Web/Media/Formats/Questions_sur_le_soutien --- -

{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}{{draft}}

+{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}{{draft}} -

L'une des réalités du travail avec la présentation et la manipulation audio et vidéo sur le web est qu'il existe un certain nombre de formats de médias disponibles, de degrés de popularité variables et avec des capacités variées. La possibilité de choisir est bonne pour l'utilisateur, dans la mesure où il peut choisir le format qui répond le mieux à ses besoins. Il y a cependant un inconvénient : comme il y a un grand choix, avec tant de types de licences et de principes de conception différents, chaque développeur de navigateur web est laissé à lui-même pour décider des types de fichiers média et des codecs à prendre en charge.

+L'une des réalités du travail avec la présentation et la manipulation audio et vidéo sur le web est qu'il existe un certain nombre de formats de médias disponibles, de degrés de popularité variables et avec des capacités variées. La possibilité de choisir est bonne pour l'utilisateur, dans la mesure où il peut choisir le format qui répond le mieux à ses besoins. Il y a cependant un inconvénient : comme il y a un grand choix, avec tant de types de licences et de principes de conception différents, chaque développeur de navigateur web est laissé à lui-même pour décider des types de fichiers média et des codecs à prendre en charge. -

Cela impose une charge légère, mais raisonnablement facile à surmonter, au développeur web : gérer correctement la situation lorsque le navigateur de l'utilisateur ne peut pas gérer un type de média particulier. Ce guide couvre les techniques que vous pouvez utiliser pour développer des contenus web qui répondent à vos besoins médiatiques tout en offrant l'expérience la plus largement compatible possible. Les sujets que nous examinerons sont les solutions de secours, les formats de base des médias et les pratiques de traitement des erreurs qui permettront à votre contenu de fonctionner dans le plus grand nombre de situations possible.

+Cela impose une charge légère, mais raisonnablement facile à surmonter, au développeur web : gérer correctement la situation lorsque le navigateur de l'utilisateur ne peut pas gérer un type de média particulier. Ce guide couvre les techniques que vous pouvez utiliser pour développer des contenus web qui répondent à vos besoins médiatiques tout en offrant l'expérience la plus largement compatible possible. Les sujets que nous examinerons sont les solutions de secours, les formats de base des médias et les pratiques de traitement des erreurs qui permettront à votre contenu de fonctionner dans le plus grand nombre de situations possible. -

Utilisation de cadres d'affiches

+## Utilisation de cadres d'affiches -

Un cadre d'affiche est une image fixe représentative du contenu d'une vidéo. Il peut s'agir simplement de la première image de la vidéo ; cependant, dans de nombreux cas, la première image est vide, ou ne contient rien d'autre que le logo d'une entreprise, ou une autre image qui ne donne au lecteur aucun contexte pour le contenu de la vidéo.

+Un **cadre d'affiche** est une image fixe représentative du contenu d'une vidéo. Il peut s'agir simplement de la première image de la vidéo ; cependant, dans de nombreux cas, la première image est vide, ou ne contient rien d'autre que le logo d'une entreprise, ou une autre image qui ne donne au lecteur aucun contexte pour le contenu de la vidéo. -

Une bonne image d'affiche est soit représentative du contenu de la vidéo, soit une image qui ne provient même pas de la vidéo elle-même mais qui contient des images et/ou du texte qui donnent au lecteur une idée utile du contenu de la vidéo. Dans le cas d'un film d'action, par exemple, le cadre de l'affiche peut être une image exemplaire de l'une des scènes les plus connues du film.

+Une bonne image d'affiche est soit représentative du contenu de la vidéo, soit une image qui ne provient même pas de la vidéo elle-même mais qui contient des images et/ou du texte qui donnent au lecteur une idée utile du contenu de la vidéo. Dans le cas d'un film d'action, par exemple, le cadre de l'affiche peut être une image exemplaire de l'une des scènes les plus connues du film. -

Un concept similaire peut être appliqué aux images fixes ; si une image que vous souhaitez présenter est très grande et peut prendre du temps à télécharger (en particulier pour les appareils ou les connexions plus lents), vous pouvez proposer une version à plus faible résolution ou une version alternative qui sera affichée jusqu'à ce que la version en qualité intégrale soit disponible pour être affichée.

+Un concept similaire peut être appliqué aux images fixes ; si une image que vous souhaitez présenter est très grande et peut prendre du temps à télécharger (en particulier pour les appareils ou les connexions plus lents), vous pouvez proposer une version à plus faible résolution ou une version alternative qui sera affichée jusqu'à ce que la version en qualité intégrale soit disponible pour être affichée. -

Nous examinerons ces deux scénarios et la manière de les mettre en œuvre.

+Nous examinerons ces deux scénarios et la manière de les mettre en œuvre. -

Images d'affiches pour la vidéo

+### Images d'affiches pour la vidéo -

Images progressives

+### Images progressives -

Les images — qu'elles soient intégrés à l'aide de {{HTMLElement("img")}} ou de {{HTMLElement("image")}} — ne supportent pas un concept similaire aux cadres. Cependant, il existe des moyens de présenter une image de faible qualité pendant qu'elle est encore en cours de chargement. Il faut pour cela créer vos images en utilisant des formats progressifs, tels que le progressif {{Glossary("JPEG")}} ou l'entrelacé {{Glossary("PNG")}}.

+Les images — qu'elles soient intégrés à l'aide de {{HTMLElement("img")}} ou de {{HTMLElement("image")}} — ne supportent pas un concept similaire aux cadres. Cependant, il existe des moyens de présenter une image de faible qualité pendant qu'elle est encore en cours de chargement. Il faut pour cela créer vos images en utilisant des formats progressifs, tels que le progressif {{Glossary("JPEG")}} ou l'entrelacé {{Glossary("PNG")}}. -

Une fois que votre image a été convertie en forme progressive, vous pouvez simplement l'utiliser comme d'habitude.

+Une fois que votre image a été convertie en forme progressive, vous pouvez simplement l'utiliser comme d'habitude. -
<img src="/images/stafff-photo-huge-progressive.jpg"
-     alt="Photo du personnel, prise en janvier 1972">
+```html +Photo du personnel, prise en janvier 1972 +``` -

Lors de l'utilisation d'une image progressive, les données sont stockées de telle sorte que le navigateur est en mesure de rendre une représentation de faible qualité de l'image dès que possible, puis de mettre à jour l'image au fur et à mesure de son chargement — ou une fois celui-ci terminé — pour la présenter en pleine qualité.

+Lors de l'utilisation d'une image progressive, les données sont stockées de telle sorte que le navigateur est en mesure de rendre une représentation de faible qualité de l'image dès que possible, puis de mettre à jour l'image au fur et à mesure de son chargement — ou une fois celui-ci terminé — pour la présenter en pleine qualité. -
-

Note : Les images progressives (ou entrelacées) sont par nature légèrement plus grandes que les versions non progressives des mêmes images. C'est à vous de déterminer si l'entrelacement sera bénéfique pour vos utilisateurs.

-
+> **Note :** Les images progressives (ou entrelacées) sont par nature légèrement plus grandes que les versions non progressives des mêmes images. C'est à vous de déterminer si l'entrelacement sera bénéfique pour vos utilisateurs. -

Vérification de la compatibilité en JavaScript

+## Vérification de la compatibilité en JavaScript -

{{domxref("HTMLMediaElement.canPlayType")}} et {{domxref("MediaSource.isTypeSupported")}}...

+{{domxref("HTMLMediaElement.canPlayType")}} et {{domxref("MediaSource.isTypeSupported")}}... diff --git a/files/fr/web/media/index.md b/files/fr/web/media/index.md index 4daa809968..e3b9f8dc79 100644 --- a/files/fr/web/media/index.md +++ b/files/fr/web/media/index.md @@ -3,49 +3,40 @@ title: Technologies media Web slug: Web/Media translation_of: Web/Media --- -
{{draft}}
+{{draft}} -

Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.

+Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them. -

References

+## References -

HTML

+### HTML -

These articles cover HTML features for media developers.

+These articles cover HTML features for media developers. -
-
{{HTMLElement("audio")}}
-
The <audio> element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files.
-
{{HTMLElement("video")}}
-
The <video> element is an endpoint for video content in a Web context. It can be used to simply present video files, or as a destination for streamed video content. <video> can also be used as a way to link media APIs with other HTML and DOM technologies, including {{HTMLElement("canvas")}} (for frame grabbing and manipulation), for example.
-
+- {{HTMLElement("audio")}} + - : The `