Les meilleurs formats d'image pour le web en 2026

Les images restent l’élément le plus lourd de la plupart des pages web : elles pèsent généralement plus que vos scripts, vos polices et vos feuilles de style réunis. Choisir le bon format est la décision de performance au plus fort effet de levier que vous puissiez prendre, et en 2026 la réponse est enfin stabilisée. En résumé : tournez-vous d’abord vers AVIF, repliez sur WebP et gardez JPEGcomme filet de sécurité universel. PNG a encore son rôle, mais plus restreint que la plupart des gens ne le pensent. Voici comment l’envisager.

La pile d’images moderne en un coup d’œil

Trois formats avec perte dominent aujourd’hui le contenu photographique sur le web, par ordre décroissant d’efficacité de compression :

AVIF : dérivé du codec vidéo AV1, il produit généralement les fichiers les plus petits à qualité visuelle donnée, souvent de 30 à 50 % plus petits que JPEG et sensiblement plus petits que WebP. Il prend aussi en charge la gamme de couleurs étendue, le HDR, la transparence ainsi que les modes avec et sans perte.
WebP : un format de Google un peu plus ancien qui reste excellent : environ 25 à 35 % plus petit que JPEG, avec prise en charge de la transparence et de l’animation. Son principal atout aujourd’hui est sa vitesse d’encodage et une compatibilité navigateur à toute épreuve.
JPEG : il a près de 35 ans et bénéficie d’une prise en charge universelle. C’est votre repli, pas votre premier choix, mais il s’affichera littéralement partout.

La bonne nouvelle pour 2026, c’est que ce n’est plus un pari. AVIF est pris en charge par les versions actuelles de Chrome, Edge, Firefox et Safari, et WebP fonctionne depuis des années sur tous les principaux navigateurs. Vous pouvez consulter la matrice de prise en charge en temps réel dans la référence des types d’image de MDN, qui recense la disponibilité par navigateur de chaque format.

AVIF ou WebP : lequel choisir ?

Si vous ne pouvez servir qu’un seul format moderne, la décision se ramène généralement à un compromis entre la taille du fichier et le coût d’encodage :

Choisissez AVIFquand les octets comptent le plus — grandes images hero, portfolios de photographie, tout ce où chaque kilo-octet pèse dans vos métriques de chargement. Il gère aussi les dégradés doux et les ciels avec bien moins d’artefacts de banding que JPEG.
Choisissez WebPquand vous avez besoin d’un encodage rapide et peu coûteux à grande échelle, ou quand vous voulez un format moderne unique offrant la portée la plus large possible et un comportement prévisible. WebP encode bien plus vite qu’AVIF, ce qui compte si vous convertissez des milliers d’images.

En réalité, vous n’avez pas à choisir. La bonne réponse pour un site en production est de proposer les deux et de laisser le navigateur décider : c’est précisément à cela que sert l’élément <picture>. Vous pouvez expérimenter les deux dès maintenant avec le compresseur AVIF et le compresseur WebPde FileShrinking, comparer les tailles de sortie côte à côte et décider ce qui convient le mieux à votre contenu. Tout s’exécute dans votre navigateur, donc rien n’est téléversé.

Servir le bon format avec <picture>

La manière la plus propre d’envoyer des formats modernes avec un repli est la négociation de contenu en HTML. L’élément <picture>vous permet de lister des sources candidates par ordre de priorité ; le navigateur utilise la première qu’il comprend et ignore les autres :

Listez d’abord votre source AVIF, puisque le format le plus efficace doit l’emporter lorsqu’il est disponible.
Listez WebPen deuxième, pour capter tout navigateur qui ne dispose pas d’AVIF mais prend en charge WebP.
Mettez un JPEG (ou PNG) ordinaire dans la balise <img>de clôture comme repli garanti — et pour porter votre texte alt, vos attributs width et height.

Comme le navigateur ne télécharge que l’unique source qu’il choisit, cela vous donne le format le plus petit que chaque visiteur peut afficher, sans aucun JavaScript ni détection côté serveur. Pour le motif de balisage complet, le guide des images adaptatives de web.dev explique aussi comment combiner <picture> avec srcset pour le changement de résolution.

Quand PNG (et SVG) comptent encore

Les formats modernes avec perte sont conçus pour les photographies. Ce sont les mauvais outils pour les graphiques plats, et PNG conserve sa place dans quelques cas précis :

Graphiques aux bords nets avec peu de couleurs : logos, icônes, captures d’interface et schémas. Le PNG sans perte conserve le texte et les bords nets, là où la compression avec perte les rendrait flous.
Captures d’écran au pixel près que vous voulez reproduire exactement, octet par octet.
Masters sourcesque vous allez réediter plus tard, puisque PNG est sans perte et n’accumule pas de perte de génération.

Cela dit, pour beaucoup de ces tâches SVGest encore meilleur : les logos et les icônes simples dessinés en vecteurs restent parfaitement nets à toute taille et pèsent souvent moins qu’un équivalent matriciel. Et lorsque vous avez bel et bien besoin d’un graphique matriciel avec transparence sur le web, AVIF comme WebP prennent aussi en charge un canal alpha — si bien qu’un WebP sans perte peut souvent battre PNG en taille. Si vous avez une ressource dans le mauvais format, le convertisseur d’images peut la convertir sans rien téléverser de nouveau.

Le poids des images et les Core Web Vitals

Le choix du format ne concerne pas seulement les factures de bande passante : il influe directement sur les Core Web Vitals de Google, qui agissent à la fois sur l’expérience utilisateur et sur le classement dans les moteurs de recherche. La métrique la plus liée aux images est le Largest Contentful Paint (LCP) : sur une page typique, l’élément le plus grand est l’image hero, donc la vitesse à laquelle cette image arrive détermine en grande partie votre score LCP. L’objectif recommandé est un LCP inférieur à 2,5 secondes pour la majorité de vos visites.

Quelques leviers pratiques, par ordre approximatif d’impact :

Réduisez les octetsen servant AVIF ou WebP plutôt que JPEG. Une image LCP plus petite arrive plus tôt : c’est le plus grand gain à lui seul.
Dimensionnez les images à leurs dimensions d’affichage. Envoyer une photo de 4000 px dans un emplacement de 800 px gaspille l’essentiel du téléchargement. Utilisez srcset pour servir des variantes de taille adaptée.
Définissez toujours width et height (ou utilisez aspect-ratioen CSS) pour que le navigateur réserve l’espace et que vous évitiez les décalages de mise en page, ce qui protège votre score CLS.
Évitez le chargement différé de l’image LCP. Différez le chargement des images en dessous de la ligne de flottaison, mais laissez l’image hero se charger immédiatement pour qu’elle ne soit pas retardée.

Ce qu’il faut retenir pour 2026

Pour le contenu photographique, optez par défaut pour AVIFafin d’obtenir les fichiers les plus petits, proposez WebP comme alternative rapide et largement compatible, et conservez un repli en JPEG dans un élément <picture> pour que chaque navigateur reçoive quelque chose. Réservez PNGaux graphiques nets, aux captures d’écran et aux masters sans perte, et utilisez SVG pour les logos et les icônes chaque fois que vous le pouvez. Compressez avant de publier, dimensionnez chaque image à son emplacement, et vos Core Web Vitals vous le rendront.

Envie de passer à la pratique ? Convertissez et compressez vos images directement dans votre navigateur avec les outils AVIF et WebP, ou changez de format avec le convertisseur d’images : aucun téléversement, aucun compte, et vos fichiers ne quittent jamais votre appareil.