Pour la plupart des sites web en 2026, la réponse est en couches : servez l'AVIF pour les plus grosses économies (souvent environ 50 % plus petit que le JPEG à qualité similaire), utilisez le WebP en fallback pour une compatibilité quasi universelle, et gardez le JPEG pour les clients les plus anciens. L'AVIF gagne sur la taille des fichiers, le WebP sur la compatibilité, le JPEG sur l'omniprésence.
Si vous vous êtes arraché les cheveux pour savoir quel format d'image nouvelle génération adopter, voici la bonne nouvelle : vous n'avez pas à en choisir un seul. L'approche moderne consiste à servir les trois et à laisser chaque navigateur prendre la version la plus petite qu'il peut décoder. Ce guide vous donne la règle de décision, les compromis réels en termes de taille et de support, et comment chaque format impacte les Core Web Vitals, pour que vous puissiez arrêter de deviner et passer à l'action.
WebP vs AVIF vs JPEG : La réponse rapide#
Les trois formats se situent sur un spectre clair entre plus récent et plus léger d'un côté, et plus ancien et plus sûr de l'autre :
- JPEG (1992) est le format universel de base. Chaque navigateur, système d'exploitation et appareil l'ouvre. Il est aussi le moins efficace, donc une qualité identique coûte le plus d'octets.
- WebP (Google, 2010) est généralement 25 % à 35 % plus petit que le JPEG à qualité comparable, et il est désormais pris en charge par pratiquement tous les navigateurs utilisés. C'est votre valeur par défaut sûre.
- AVIF (2019, basé sur le codec vidéo AV1) est le plus efficace des trois, souvent environ 50 % plus petit que le JPEG et nettement plus petit que le WebP, avec une prise en charge sur tous les principaux navigateurs actuels.
La décision en une ligne : utilisez AVIF comme format principal avec WebP comme solution de repli, et ne conservez le JPEG que si vous devez prendre en charge des clients très anciens. Servez-les ensemble avec l'élément HTML <picture> afin que le navigateur choisisse le meilleur qu'il comprend.
Comparaison des trois formats#
Les compromis se résument à quatre critères : taille du fichier, compatibilité navigateur, fonctionnalités et coût d'encodage. Voici le comparatif.
| Format | Taille typique vs JPEG | Compatibilité navigateur | Transparence | Idéal pour |
|---|---|---|---|---|
| JPEG | Référence (100%) | Universel, tous les navigateurs | Non | Photos, fallback, email |
| WebP | ~25-35% plus petit | Tous les navigateurs récents | Oui (avec et sans perte) | Par défaut universel sûr |
| AVIF | ~50% plus petit | Tous les principaux navigateurs récents | Oui, plus HDR/large gamme | Images hero, économies maximales |
Quelques précisions sur le tableau :
- Les chiffres de taille sont approximatifs et dépendent de l'image. Les contenus photographiques avec des dégradés lisses (ciels, peau) sont ceux où l'AVIF est le plus avantageux. Les graphiques simples avec des couleurs unies voient des gains moindres, et un PNG ou SVG bien optimisé peut encore être préférable.
- Vitesse d'encodage : l'AVIF est plus lent à encoder que le WebP ou le JPEG, ce qui compte pour les pipelines de build compressant des milliers d'images, mais est négligeable pour un upload unique.
- Transparence : le WebP et l'AVIF prennent en charge la transparence alpha, ils peuvent donc remplacer le PNG pour les images photographiques avec fond transparent, souvent à une fraction de la taille.
Note pratique sur la qualité : ne cherchez pas systématiquement le fichier le plus petit. Avec des réglages AVIF très agressifs, vous pouvez introduire des artefacts "aquarelle" flous dans les détails fins. Visez le fichier le plus petit qui reste net en taille réelle, pas le plus petit possible.
Pourquoi la taille du fichier détermine les Core Web Vitals#
C'est le point qui relie le choix du format au classement et aux revenus. Les images sont généralement les éléments les plus lourds d'une page, et la plus grande image est très souvent l'élément Largest Contentful Paint (LCP), l'image vedette ou mise en avant qui définit quand Google considère votre page comme "chargée".
Le LCP est l'un des Core Web Vitals de Google, et un LCP lent nuit à la fois à l'expérience utilisateur et aux performances de recherche. Le calcul est simple : si votre image vedette est un JPEG de 400 Ko et que la version AVIF fait 200 Ko, vous avez réduit de moitié les octets que le navigateur doit télécharger avant que le LCP ne se déclenche. Sur une connexion mobile, cela peut faire la différence entre un score "bon" et un score "à améliorer".
Deux autres avantages liés à la taille méritent d'être mentionnés :
- Bande passante et coût : des images plus petites signifient moins de données transférées, ce qui réduit les factures CDN et aide les utilisateurs sur des connexions limitées ou lentes.
- Efficacité du crawl : des pages plus légères se chargent plus rapidement pour tout le monde, y compris pour l'étape de rendu effectuée par les moteurs de recherche.
La conclusion est que le "meilleur format d'image pour le web" est en réalité une question de Core Web Vitals. Des images plus petites et correctement servies constituent l'un des correctifs de vitesse de page les plus efficaces.
Comment servir les trois formats avec une seule balise#
Vous ne choisissez pas un format unique pour l'ensemble de votre site. Vous fournissez les formats modernes et un repli, et le navigateur sélectionne le premier qu'il peut décoder. L'élément <picture> gère cela nativement.
Étape 1 : Compressez votre image source dans les trois formats#
Partez de votre original de la plus haute qualité (le JPEG ou PNG brut directement issu de l'appareil photo ou de l'outil de conception). Exportez un AVIF, un WebP et un JPEG optimisé de la même image aux mêmes dimensions. Un compresseur d'images gratuit le fait en une seule passe et s'exécute entièrement dans votre navigateur, de sorte que la photo originale n'est jamais téléchargée sur un serveur.
Étape 2 : Intégrez-les dans un élément picture#
Listez les formats du plus petit au plus grand. Le navigateur lit de haut en bas et s'arrête au premier type qu'il prend en charge, donc l'AVIF en premier, le WebP en second, et la balise <img> JPEG simple comme repli universel.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Texte alternatif descriptif" width="1200" height="630">
</picture>
Conservez les attributs width et height sur la balise <img>. Ils permettent au navigateur de réserver l'espace avant le chargement de l'image, ce qui évite les décalages de mise en page (CLS, un autre Core Web Vital).
Étape 3 : Supprimez les métadonnées et redimensionnez avant de compresser#
Deux gains faciles avant même de choisir un format. D'abord, redimensionnez aux dimensions d'affichage réelles. Servir une photo de 4000 px dans un espace de 1200 px gaspille des octets qu'aucun codec ne peut récupérer, utilisez donc un redimensionneur d'images pour correspondre à la taille réelle de la mise en page. Ensuite, supprimez les métadonnées EXIF (modèle d'appareil photo, coordonnées GPS, horodatages), qui ajoutent du poids et peuvent divulguer des données de localisation privées. Les bons compresseurs les suppriment automatiquement.
Étape 4 : Laissez l'outil choisir automatiquement le plus petit#
Plutôt que d'estimer trois exports, compressez dans les trois formats et comparez directement les tailles de sortie. Le compresseur d'images gratuit affiche la taille en octets résultante pour chaque format à partir d'un seul téléchargement, vous pouvez donc choisir le plus petit qui reste net, sans essais et erreurs manuels.
Lossy vs Lossless, et choix du niveau de qualité#
Les trois formats sont généralement utilisés en mode lossy pour les photos, ce qui signifie qu'ils suppriment les détails que l'œil remarque à peine en échange de fichiers beaucoup plus petits. WebP et AVIF prennent également en charge le mode lossless, qui conserve chaque pixel mais produit des fichiers plus volumineux, utile pour les captures d'écran, les diagrammes ou les images avec du texte net et des couleurs unies.
Le réglage de la qualité est là où se produisent la plupart des économies (et la plupart des erreurs) :
- JPEG qualité 75-85 est le point idéal pour les photos. En dessous de ~70, vous commencez à voir des artefacts de blocage sur les bords.
- WebP qualité 75-80 correspond à peu près à JPEG 85 avec une taille plus petite, car WebP compresse plus efficacement à qualité perçue égale.
- AVIF qualité 50-65 semble souvent aussi net qu'un réglage JPEG beaucoup plus élevé. L'échelle de qualité d'AVIF n'est pas directement comparable à celle de JPEG, ne supposez donc pas que "qualité 80" signifie la même chose selon les formats.
La méthode fiable n'est pas de se fier à un nombre mais de comparer le résultat. Encodez l'image, visualisez-la en taille réelle et réduisez la qualité jusqu'à voir le premier artefact, puis remontez d'un cran. Cela vous donne le plus petit fichier acceptable pour cette image spécifique, ce qui est toujours mieux qu'un réglage de qualité uniforme appliqué à tout.
Un piège subtil : recompresser une image déjà lossy (prendre un JPEG et l'enregistrer en WebP lossy) cumule les pertes. Exportez toujours vos formats modernes à partir de l'original de la meilleure qualité que vous avez, pas d'une copie déjà compressée.
Images responsives : servir la bonne taille, pas seulement le bon format#
Le format n'est qu'une moitié de l'équation de la vitesse de page. L'autre moitié, ce sont les dimensions. Un téléphone avec un écran de 400 px de large n'a aucun usage pour une image de 1600 px, et envoyer la grande image gaspille des octets, quel que soit le format.
Les attributs srcset et sizes vous permettent de proposer plusieurs tailles d'une même image et de laisser le navigateur choisir en fonction de l'écran et de la résolution de l'appareil. Vous pouvez combiner cela avec <picture> pour que chaque format soit également disponible en plusieurs largeurs.
<picture>
<source
type="image/avif"
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
sizes="(max-width: 600px) 400px, 1200px">
<img src="hero-800.jpg" alt="Texte alternatif descriptif" width="1200" height="630">
</picture>
Cela associe le gain de format (AVIF par rapport à JPEG) au gain de taille (une image de 400 px pour les téléphones), et les deux économies se cumulent. Pour un site de contenu où le même article est consulté sur téléphone et ordinateur, cette combinaison est souvent la plus grande amélioration du LCP mobile possible.
Si écrire ce balisage à la main est trop fastidieux, la plupart des frameworks modernes et des CMS génèrent automatiquement les variantes AVIF et WebP ainsi que le balisage responsive lors du téléchargement. Le principe reste le même : le plus petit format pris en charge par le navigateur, à la plus petite taille nécessaire pour la mise en page.
Quand ne PAS utiliser AVIF ou WebP#
Ces formats sont destinés aux photographies et aux images matricielles complexes. Ils ne conviennent pas à deux cas courants :
- Logos, icônes et dessins au trait : utilisez SVG. C'est un format vectoriel, donc il reste parfaitement net à n'importe quelle taille et est généralement très léger. Si vous n'avez qu'un logo matriciel, notre guide et outil pour convertir SVG en PNG couvre l'aller-retour.
- Animations : les boucles courtes sont bien mieux servies par une vidéo muette en lecture automatique (MP4 ou WebM) qu'un GIF animé lourd ou même un WebP animé.
Il existe aussi le cas marginal de quelques clients très anciens ou spécialisés qui ne décodent ni AVIF ni WebP. C'est exactement à cela que sert le fallback JPEG dans votre élément <picture>, donc vous ne perdez rien à l'inclure.
La règle de décision 2026, résumée#
En résumé, le workflow est court :
- Par défaut, utiliser AVIF, avec WebP en repli, et JPEG comme filet de sécurité. Servez les trois avec
<picture>et laissez le navigateur choisir. - AVIF pour les images hero et les grandes photos, où ses ~50% d'économie par rapport au JPEG optimisent le plus le LCP.
- WebP si vous ne servez qu'un seul format moderne, car sa prise en charge est quasi universelle et il reste nettement meilleur que le JPEG.
- SVG pour les logos et icônes, jamais un format matriciel.
- Redimensionnez d'abord, supprimez les métadonnées, puis compressez, et laissez l'outil indiquer le format le plus léger.
Le choix du format n'est qu'un levier. Pour une vue d'ensemble sur la réduction du poids des pages sans sacrifier la qualité, consultez notre guide sur l'utilisation d'un compresseur d'images gratuit pour améliorer la vitesse de chargement.
Foire aux questions#
AVIF est-il meilleur que WebP ? En termes de taille de fichier, généralement oui. L'AVIF produit souvent des fichiers plus petits que le WebP à qualité similaire, surtout sur les photos, et prend en charge le HDR et les larges gammes de couleurs. Le WebP encode plus rapidement et bénéficie d'un support universel légèrement plus ancien, d'où la pratique courante d'utiliser AVIF en priorité avec WebP en solution de repli.
Quelle est la différence de taille entre AVIF et JPEG ? Sur un contenu photographique typique, l'AVIF est souvent environ 50 % plus petit que le JPEG à qualité visuelle comparable, bien que l'économie exacte dépende de l'image. Les photos avec des dégradés lisses bénéficient des plus gros gains, tandis que les graphiques aux couleurs unies en profitent moins, où le SVG ou le PNG peuvent être un meilleur choix.
Devrais-je simplement utiliser WebP pour tout ? Le WebP est un choix par défaut solide et sûr car son support navigateur est quasi universel et il surpasse le JPEG en taille. Mais servir l'AVIF comme format principal avec WebP en repli permet d'obtenir des fichiers encore plus petits, sans perte de compatibilité, puisque le navigateur ne prend l'AVIF que s'il peut le décoder.
Ces formats nuisent-ils au référencement ? C'est le contraire. Des images plus petites accélèrent le Largest Contentful Paint, un Core Web Vital qui affecte à la fois l'expérience utilisateur et les performances de recherche. Veillez simplement à conserver un texte alternatif descriptif et des attributs de largeur et hauteur corrects pour éviter les décalages de mise en page.
Comment convertir un JPEG en WebP ou AVIF gratuitement ? Téléchargez votre image sur un compresseur d'images gratuit en ligne, qui exporte en WebP et AVIF sans envoyer le fichier sur un serveur. Compressez dans les trois formats à la fois et conservez le plus petit tout en restant net en taille réelle.
Quel est le format de fichier image le plus petit pour le web ? Pour les photos, l'AVIF est généralement le plus petit des formats raster courants, devant le WebP et bien devant le JPEG. Pour les logos, icônes et dessins au trait, le SVG est encore plus petit car il est vectoriel et s'adapte sans ajouter de pixels.
