Chaque développeur web se retrouve tôt ou tard face à la même question : quel format d’image choisir pour tel ou tel usage ? La réponse dépend directement de la connaissance de toutes les extensions qui correspondent à des formats d’images, et leur liste est bien plus longue qu’on ne l’imagine. Entre les formats historiques comme le JPEG, les formats vectoriels comme le SVG, et les nouvelles générations portées par Google ou l’ISO, le paysage technique évolue sans cesse. Maîtriser ces extensions, c’est éviter des erreurs de compatibilité, des pertes de qualité inutiles et des temps de chargement qui pénalisent le référencement. Ce guide technique fait le tour complet du sujet.
Ce que les formats d’images représentent vraiment pour le web
Un format d’image n’est pas qu’une simple extension de fichier. C’est un ensemble de règles d’encodage qui détermine comment les données visuelles sont stockées, compressées et restituées. Le W3C, organisme de standardisation du web, distingue plusieurs grandes familles : les formats matriciels (ou raster), les formats vectoriels, et les formats animés. Chaque famille répond à des besoins différents.
Les formats matriciels stockent l’image pixel par pixel. Agrandir une telle image au-delà de ses dimensions d’origine dégrade sa qualité. Le JPEG et le PNG appartiennent à cette catégorie. Les formats vectoriels, à l’inverse, décrivent l’image via des équations mathématiques. Redimensionner un SVG à n’importe quelle taille ne produit aucune dégradation visible.
La compression est l’autre variable majeure. Elle peut être sans perte (lossless), comme pour le PNG, ou avec perte (lossy), comme pour le JPEG. Le choix entre les deux influe directement sur la taille du fichier et la qualité perçue. Pour un développeur, comprendre cette distinction avant même de connaître les extensions est indispensable.
Les navigateurs modernes ne supportent pas tous les mêmes formats. Chrome, Firefox et Safari ont chacun leurs propres niveaux de compatibilité, ce qui complique les décisions techniques. La documentation de référence MDN Web Docs maintient une liste actualisée des formats supportés par chaque moteur de rendu — une ressource à consulter régulièrement.
Quelles sont toutes les extensions correspondant à des formats d’images
La liste complète est plus étendue que les cinq ou six formats que l’on cite habituellement. Voici un recensement structuré des extensions à connaître, classées par usage principal.
Formats matriciels courants :
- .jpg / .jpeg — Format compressé avec perte, idéal pour les photographies. Défini par le Joint Photographic Experts Group.
- .png — Compression sans perte avec support de la transparence (canal alpha). Référence pour les graphiques web.
- .gif — Limité à 256 couleurs, supporte les animations. Toujours utilisé pour les images animées légères.
- .bmp — Format bitmap non compressé de Microsoft. Fichiers volumineux, usage quasi exclusivement desktop.
- .tiff / .tif — Format professionnel sans perte, très utilisé en impression et en archivage. Standardisé par l’ISO.
- .webp — Développé par Google, offre une compression supérieure au JPEG et au PNG, avec support de la transparence et de l’animation.
- .avif — Basé sur le codec AV1, ce format récent dépasse le WebP en termes de compression. Support navigateur en forte progression.
- .heic / .heif — Format développé par l’MPEG Group, utilisé nativement par Apple sur iOS. Compression très efficace, compatibilité web encore limitée.
- .jxl — JPEG XL, format nouvelle génération soutenu par le W3C. Compression lossless et lossy, HDR natif.
- .ico — Format dédié aux favicons. Peut contenir plusieurs tailles d’images dans un seul fichier.
- .psd — Format natif d’Adobe Photoshop. Non destiné au web, mais souvent manipulé dans les workflows de production.
- .raw / .cr2 / .nef / .arw — Formats bruts de capteurs photo (Canon, Nikon, Sony). Aucune compression destructive, traitement en post-production.
- .exr — Format HDR développé par Industrial Light & Magic. Utilisé en production cinématographique et dans les moteurs 3D.
- .dds — Format de texture pour les applications DirectX et les jeux vidéo. Peu courant dans le développement web classique.
Formats vectoriels :
- .svg — Scalable Vector Graphics, standard du W3C. Nativement supporté par tous les navigateurs modernes.
- .ai — Format natif d’Adobe Illustrator. Vecteur propriétaire, non interprétable directement par les navigateurs.
- .eps — Encapsulated PostScript. Format vectoriel historique, peu utilisé sur le web.
- .pdf — Peut contenir des graphiques vectoriels. Certains navigateurs l’affichent directement, mais ce n’est pas un format image web à proprement parler.
Avantages et limites des formats les plus répandus
Le JPEG reste le format dominant pour les photographies sur le web. Sa compression avec perte permet de réduire drastiquement le poids des fichiers, au prix d’une légère dégradation invisible à l’œil nu pour des taux de qualité supérieurs à 80 %. Un JPEG bien compressé peut peser dix fois moins qu’un PNG équivalent.
Le PNG excelle dans deux situations précises : les images nécessitant de la transparence et les graphiques aux aplats de couleur (logos, illustrations vectorisées en bitmap, captures d’écran). Sa compression sans perte garantit une fidélité parfaite, mais produit des fichiers plus lourds. Pour une photographie, le PNG est presque toujours le mauvais choix.
Le GIF survit grâce aux animations. Sa palette de 256 couleurs le rend inutilisable pour les photos, mais il reste pertinent pour les pictogrammes animés simples. Le WebP et l’AVIF ont techniquement de meilleures capacités d’animation, mais la culture web a ancré le GIF dans les usages.
Le WebP offre en moyenne 25 à 35 % de réduction de poids par rapport au JPEG à qualité équivalente. Son support est désormais universel dans les navigateurs modernes. La migration vers WebP est aujourd’hui une pratique standard dans les projets de performance web. Le format supporte à la fois la transparence et l’animation, ce qui en fait un remplaçant potentiel du PNG et du GIF.
L’AVIF pousse la compression encore plus loin, avec des gains de l’ordre de 50 % sur le JPEG. Son adoption est rapide, mais son encodage reste plus lent, ce qui peut poser des problèmes dans les pipelines de traitement d’images à la volée.
Sélectionner le bon format selon le contexte technique
La décision ne doit pas se prendre au hasard. Plusieurs critères objectifs guident le choix : le type de contenu visuel, la nécessité ou non de transparence, le support navigateur cible, et les contraintes de performance.
Pour une photographie destinée au web, WebP avec fallback JPEG reste la combinaison la plus fiable en 2024. L’AVIF peut être ajouté en première option via la balise <picture> pour les navigateurs compatibles. Le JPEG seul convient si la chaîne de traitement ne permet pas de générer plusieurs formats.
Pour un logo ou une icône, le SVG est presque toujours préférable. Il est léger, redimensionnable à l’infini et stylisable en CSS. Quand le SVG n’est pas possible (image complexe), le PNG 24 bits avec transparence prend le relais.
Pour les captures d’écran et les illustrations techniques (documentation, tutoriels), le PNG préserve la lisibilité du texte et les contours nets. Le JPEG produit des artefacts visibles sur les zones de texte et les lignes fines.
Les images d’arrière-plan CSS suivent les mêmes règles, mais avec une contrainte supplémentaire : la compatibilité navigateur doit être gérée directement en CSS ou via des classes conditionnelles. Les frameworks comme Next.js ou Nuxt.js intègrent des composants d’optimisation d’images qui gèrent automatiquement la sélection du format.
Ce que les formats émergents changent dans les workflows de production
Le JPEG XL (.jxl) est le candidat le plus ambitieux de la prochaine décennie. Standardisé par l’ISO et soutenu par le W3C, il combine compression lossless et lossy dans un seul format, supporte le HDR natif, et permet la recompression de JPEG existants sans perte supplémentaire. Chrome l’a un temps supporté avant de retirer ce support en 2022, puis de le réintégrer en 2024 — signe des débats encore actifs autour de son adoption.
Le format HEIC (High Efficiency Image Container) s’impose dans l’univers Apple. Les iPhones génèrent des photos en HEIC par défaut depuis iOS 11. Pour les développeurs web, cela crée un besoin de conversion systématique côté serveur, car le support navigateur reste limité en dehors de Safari.
Les CDN d’images comme Cloudinary, Imgix ou Cloudflare Images ont transformé la gestion des formats. Ces services détectent automatiquement le navigateur du visiteur et servent le format le plus adapté — AVIF, WebP ou JPEG — sans que le développeur ait à gérer plusieurs versions de chaque image manuellement. Cette approche automatisée est aujourd’hui la norme dans les architectures web modernes à haute performance.
La question des formats d’images pour les interfaces 3D et le web immersif ouvre un nouveau chapitre. Les formats comme .ktx2 (Khronos Texture) ou .basis sont conçus pour les textures GPU et s’intègrent dans les scènes WebGL et WebGPU. Ces extensions restent hors du périmètre du développement web classique, mais leur présence dans les projets Three.js ou Babylon.js devient courante.
Connaître l’ensemble de ces extensions n’est pas un exercice académique. C’est une compétence directement liée à la performance, à l’accessibilité et à la maintenabilité des projets web. Les formats évoluent, les outils s’adaptent — et les développeurs qui maîtrisent ce panorama prennent systématiquement de meilleures décisions techniques.