Blog · 5 mai 2026 · 6 min de lecture

Quel format d'image pour le web en 2026 : matrice de décision par usage

Au lieu de comparer abstraitement les formats, voici une matrice concrète : pour chaque type de contenu et chaque type de site, le format à choisir et le réglage qui marche.

formats web guide

Comparer JPG, PNG, WebP et AVIF en théorie a déjà été fait mille fois — y compris dans notre comparatif détaillé. Mais quand il s’agit de choisir, ce qui manque souvent, c’est une matrice par usage : « pour mon cas précis, lequel ? ». Cet article répond à la question directement.

La règle à 3 questions

Avant de plonger dans les cas particuliers, posez-vous trois questions dans cet ordre :

Mon image a-t-elle besoin de transparence ? → si oui, exclure le JPG.
Le LCP de cette image est-il critique ? → si oui, viser AVIF ; sinon, WebP suffit.
Mon audience comprend-elle des navigateurs antérieurs à 2018 ? → si oui, prévoir un fallback JPG/PNG via <picture>.

Avec ces trois réponses, vous éliminez 80 % des doutes. Pour les 20 % restants, voici la matrice détaillée.

Matrice par type de contenu

Type de contenu	Format recommandé	Réglage	Fallback
Photo d’article de blog	WebP	qualité 80-85	JPG via `<picture>`
Hero image plein écran	AVIF	qualité 65-70	WebP, JPG
Photo de produit e-commerce	WebP	qualité 85	JPG
Photo zoom haute résolution	AVIF	qualité 75	WebP
Logo / icône / pictogramme	WebP lossless	qualité 100	PNG
Capture d’écran de UI	WebP	qualité 90	PNG
Capture documentation technique	WebP	qualité 90	PNG
Illustration vectorielle aplatie	WebP lossless	qualité 95-100	PNG
Schéma / diagramme	SVG (vectoriel)	—	PNG si raster requis
Photo de portrait	WebP	qualité 85-90	JPG
Image hero de landing page	AVIF	qualité 60-70	WebP, JPG
Vignette de galerie / catalogue	WebP	qualité 75-80	JPG
Image de couverture réseau social	JPG	qualité 85	—
Avatar utilisateur	WebP	qualité 80	JPG
Bannière publicitaire	WebP	qualité 80	JPG
Photo embarquée dans un email	JPG	qualité 80	—

Matrice par type de site

Blog éditorial (média, magazine, blog perso)

Photos d’articles → WebP qualité 80, < 150 Ko, redimensionnement à 1200 px max.
Image hero d’article → WebP qualité 85, < 250 Ko.
Vignettes liste d’articles → WebP qualité 75, < 50 Ko.
Format de fallback : JPG à servir aux anciens navigateurs.
Gain typique vs JPG par défaut : −60 % de poids, +20 points Lighthouse.

E-commerce (Shopify, WooCommerce, Prestashop)

Photo principale produit → WebP qualité 85, < 200 Ko, dimension 1200×1200 px max.
Galerie produit (vues secondaires) → WebP qualité 80, < 150 Ko.
Miniatures de catalogue → WebP qualité 80, < 50 Ko, dimension 400 px.
Photos lifestyle → WebP qualité 85.
Bannières promo → WebP qualité 80, dimension limitée à la maquette.
Recommandation forte : passer en AVIF sur les pages catégorie les plus visitées (impact direct sur le SEO et le taux de conversion mobile).

Portfolio créatif (photo, design, architecture)

Galerie principale → AVIF qualité 75, fallback WebP qualité 90.
Image en plein écran (lightbox) → AVIF qualité 80, fallback WebP qualité 95.
Mode visualisation 100 % → JPG qualité 95 (ou TIFF non-web), pour préserver les détails.
Vignettes index → WebP qualité 80.
Particularité : ici la qualité prime sur le poids, restez généreux sur les réglages.

Site vitrine TPE / association

Toutes les images → WebP qualité 85, < 150 Ko, redimensionnement à 1200 px.
Pas besoin d’AVIF : peu d’images, pas de gain marginal significatif.
Logo → SVG si vectoriel disponible, sinon WebP lossless.
Pas de plugin nécessaire : compression manuelle pré-upload via un outil comme le nôtre suffit.

SaaS / produit digital (landing, doc, blog tech)

Hero / illustrations animées → AVIF qualité 65 + fallback WebP.
Captures d’écran de produit → WebP qualité 90 (préserve la netteté du texte).
Diagrammes techniques → SVG si possible, sinon PNG sans perte → WebP lossless.
Documentation → WebP qualité 85, lazy loading systématique.
Particularité : les utilisateurs sont sur fibre, mais la performance reste un signal pro.

Plateforme média / actualité (forte audience mobile)

Photo principale article → AVIF qualité 70 (chaque ms compte).
Photos secondaires → WebP qualité 80.
Galeries → WebP qualité 75 + lazy loading agressif.
Vidéo / GIF animé → MP4 silencieux (pas de GIF, jamais).
Investissement CDN : justifié par le volume.

La règle « format par défaut » en 2026

Si vous deviez n’en retenir qu’une seule règle, ce serait celle-ci :

WebP qualité 80 est le format par défaut universel pour le web en 2026.

Il marche à 95 % du temps. Il n’est jamais un mauvais choix. Il est supporté partout. C’est votre point de départ par défaut, et vous ne dérogez à cette règle que pour des raisons précises :

Vous sortez du cadre web (impression, archivage) → JPG ou TIFF.
Vous avez besoin d’un format universel pré-2018 → JPG/PNG.
L’image est critique pour le LCP → AVIF pour ce cas spécifique.
Vous avez besoin de transparence préservée pixel-perfect → WebP lossless ou PNG.

Servir le bon format à chaque navigateur

La balise <picture> est votre meilleure amie. Elle permet de fournir plusieurs versions et laisser le navigateur choisir celle qu’il sait décoder en priorité :

<picture>
  <source type="image/avif" srcset="/photo.avif">
  <source type="image/webp" srcset="/photo.webp">
  <img src="/photo.jpg"
       alt="..."
       width="1200"
       height="800"
       loading="lazy"
       decoding="async">
</picture>

Trois fichiers physiques, un seul HTML, et chaque visiteur reçoit le format optimal. C’est l’arrangement standard et universellement recommandé.

Outils pour générer ces formats

Vous pouvez convertir n’importe quelle image vers WebP, AVIF ou tout autre format directement dans notre outil de compression — gratuit, sans envoi serveur, traitement par lot supporté. Pour les piles automatisées :

Sharp (Node.js) — la référence côté backend.
ImageMagick ≥ 7.1 — ligne de commande, supporte tous les formats.
CDN : Cloudflare Polish, ImageKit, Cloudinary — conversion à la volée.

En résumé

WebP qualité 80 = défaut universel.
AVIF qualité 65-70 = pour les images critiques au LCP.
PNG / WebP lossless = pour les contenus pixel-perfect requis.
JPG = uniquement quand l’audience inclut des outils ou clients très anciens.
Toujours servir via <picture> avec fallback pour la compatibilité maximale.

Ces choix tiennent en 5 lignes parce qu’ils sont stables : les formats du web ont peu bougé depuis l’arrivée d’AVIF en 2020-2022. Ce qui a changé, c’est que le support est maintenant assez large pour qu’on puisse vraiment compter dessus. Profitez-en.