Guide complet des formats d'image : JPEG, PNG, WebP, AVIF, SVG

Pourquoi le choix du format d'image est crucial

Les images représentent en moyenne 50 à 70 % du poids total d'une page web. Choisir le mauvais format d'image, c'est risquer d'alourdir inutilement votre site, de dégrader l'expérience utilisateur et de pénaliser votre référencement naturel.

Google intègre les Core Web Vitals dans son algorithme de classement depuis 2021. Parmi ces métriques, le Largest Contentful Paint (LCP) mesure le temps de chargement de l'élément visuel le plus grand de la page, souvent une image. Un format inadapté peut faire passer votre LCP de 1,5 seconde à plus de 4 secondes, ce qui est rédhibitoire.

Mais la performance n'est pas la seule considération. Selon votre cas d'usage :

• Vous avez besoin de transparence pour un logo sur fond coloré.
• Vous devez afficher une photographie haute qualité sans artefacts visibles.
• Vous souhaitez un graphique scalable qui reste net sur tous les écrans.
• Vous ciblez un maximum de compatibilité avec les anciens navigateurs.

Ce guide passe en revue les cinq formats d'image incontournables du web moderne, JPEG, PNG, WebP, AVIF et SVG, pour vous aider à faire le bon choix à chaque situation.

JPEG : le vétéran de la photographie

Le format JPEG (Joint Photographic Experts Group) a été standardisé en 1992. Malgré son âge, il reste l'un des formats les plus utilisés sur le web, notamment pour les photographies.

Comment fonctionne la compression JPEG ?

JPEG utilise une compression avec pertes (lossy). L'algorithme analyse l'image, identifie les zones de couleur similaire et supprime les détails imperceptibles à l'œil humain. Ce processus est réglable via un niveau de qualité (généralement de 0 à 100).

À qualité 80, une photographie JPEG est souvent indiscernable de l'original mais pèse 5 à 10 fois moins. À qualité 50, des artefacts de compression deviennent visibles, notamment autour des bords nets.

Cas d'usage idéaux pour JPEG

• Photographies : portraits, paysages, photos de produits
• Images avec dégradés complexes : couchés de soleil, ciels nuageux
• Images où la transparence n'est pas nécessaire
• Compatibilité maximale : tous les navigateurs, systèmes et appareils

Limites du format JPEG

• Pas de transparence : le fond est toujours blanc ou d'une couleur unie
• Pas d'animation : impossible d'animer un fichier JPEG
• Dégradation progressive : chaque réenregistrement amplifie les artefacts
• Mauvais pour les graphiques et textes : les contours nets deviennent flous

PNG : transparence et compression sans pertes

Le format PNG (Portable Network Graphics) a été créé en 1996 comme alternative libre au GIF. Il offre une compression sans pertes et prend en charge la transparence, ce qui en fait un choix privilégié pour les graphiques web.

PNG-8 vs PNG-24 vs PNG-32

Il existe plusieurs variantes du format PNG :

• PNG-8 : palette de 256 couleurs maximum, fichiers très légers, idéal pour les icônes simples
• PNG-24 : 16 millions de couleurs, sans transparence alpha
• PNG-32 : 16 millions de couleurs avec canal alpha (transparence partielle)

La transparence alpha : l'atout majeur de PNG

La transparence alpha permet à chaque pixel d'avoir un niveau d'opacité entre 0 (totalement transparent) et 255 (totalement opaque). C'est ce qui rend PNG indispensable pour :

• Les logos sur fond coloré ou photographique
• Les icônes avec bordures arrondies
• Les superpositions d'éléments graphiques
• Les captures d'écran avec zones transparentes

Quand choisir PNG plutôt que JPEG ?

Choisissez PNG lorsque :

• Votre image contient de la transparence
• L'image comporte du texte ou des lignes nettes
• Vous avez besoin de fidélité pixel parfaite (captures d'écran, UI)
• L'image sera réutilisée et réenregistrée plusieurs fois

WebP : le format moderne de Google

Développé par Google et publié en 2010, WebP a été conçu pour remplacer à la fois JPEG et PNG sur le web. Il offre une compression supérieure dans les deux modes, avec et sans pertes, tout en supportant la transparence et l'animation.

Avantages de WebP par rapport à JPEG et PNG

• 25 à 35 % plus léger que JPEG à qualité visuelle équivalente
• 26 % plus léger que PNG en mode sans pertes
• Transparence alpha avec un surcoût de poids minimal
• Support de l'animation (comme GIF, mais bien plus efficace)
• Compression avec et sans pertes dans un seul format

Support navigateur en 2026

WebP est désormais supporté par plus de 97 % des navigateurs modernes, dont Chrome, Firefox, Safari (depuis iOS 14 / macOS Big Sur), Edge et Opera. En 2026, il n'est plus nécessaire de fournir un fallback JPEG sauf pour des publics très spécifiques utilisant des navigateurs anciens.

Quand utiliser WebP ?

WebP convient à presque tous les cas d'usage web : photographies, graphiques, images avec transparence. C'est le format de premier choix pour optimiser les performances d'un site web moderne.

AVIF : la nouvelle génération

AVIF (AV1 Image File Format) est le petit dernier des formats d'image web. Basé sur le codec vidéo AV1 développé par l'Alliance for Open Media, il pousse les limites de la compression image encore plus loin que WebP.

Compression supérieure à tous les autres formats

AVIF offre des économies de taille impressionnantes :

• 50 % plus léger que JPEG à qualité visuelle équivalente
• 20 à 30 % plus léger que WebP dans la plupart des cas
• Excellente gestion des dégradés et détails fins
• Support du HDR et de la large gamme de couleurs

Adoption et support en 2026

En 2026, AVIF est supporté par Chrome, Firefox, Safari 16+, Edge et Opera, couvrant environ 90 % des utilisateurs mondiaux. L'encodage AVIF reste plus lent que WebP, mais pour les images statiques sur un site web, ce temps de traitement est effectué une seule fois.

Limites actuelles d'AVIF

• Encodage plus lent que WebP (important pour les images générées à la volée)
• Support logiciel encore partiel (certains outils d'édition ne le gèrent pas)
• Moins adapté aux très petites images (l'overhead du format dépasse le gain)

SVG : les vecteurs pour le web

SVG (Scalable Vector Graphics) est radicalement différent des autres formats. Là où JPEG, PNG, WebP et AVIF sont des formats raster (composés de pixels), SVG décrit des formes géométriques en XML. Résultat : une image SVG est parfaitement nette à n'importe quelle taille.

Avantages du format SVG

• Scalabilité infinie : net à 16×16 px comme à 4K, sans aucune perte
• Poids ultra-léger pour les graphiques simples (logo, icône) : quelques centaines d'octets
• Stylisable via CSS : changez la couleur d'une icône sans retoucher le fichier
• Animable : créez des animations légères avec CSS ou SMIL
• Indexable : le texte dans un SVG peut être lu par les moteurs de recherche
• Accessible : ajoutez des balises title et desc pour les lecteurs d'écran

Inline SVG vs balise <img>

Il existe deux façons d'intégrer un SVG dans une page HTML :

• Inline SVG : le code SVG est directement dans le HTML. Permet le contrôle CSS complet, mais alourdit le DOM.
• Balise <img> : traité comme n'importe quelle image. Plus simple, mis en cache par le navigateur, mais moins de contrôle stylistique.

Limites du SVG

• Inadapté aux photographies : les images complexes produisent des fichiers SVG énormes
• Risque de sécurité si l'SVG vient d'une source non fiable (balises de script possibles)
• Rendu variable selon les navigateurs pour les filtres complexes

Tableau comparatif complet des formats d'image

Ce tableau résume les caractéristiques principales de chaque format pour vous aider à décider rapidement.

Comment choisir le bon format selon votre cas d'usage

Voici un arbre de décision simplifié pour choisir rapidement le format adapté :

Votre image est vectorielle (logo, icône, diagramme) ?

→ Utilisez SVG. Pas de discussion.

Votre image est une photographie ou une image complexe avec de nombreuses couleurs ?

• Si vous ciblez les meilleures performances : AVIF (avec fallback WebP)
• Si vous voulez simplicité et compatibilité : WebP
• Si vous avez besoin de compatibilité universelle : JPEG

Votre image nécessite de la transparence ?

• Préférez WebP ou AVIF pour les performances
• Utilisez PNG si vous avez besoin de compatibilité maximale
• Évitez JPEG (pas de support de transparence)

Votre image est une capture d'écran ou contient du texte ?

→ Utilisez PNG ou WebP sans pertes. La compression avec pertes de JPEG floute les bords nets.

Vous recevez des images HEIC depuis un iPhone ?

→ Convertissez en JPEG ou WebP avant de les publier sur le web.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l'image">
</picture>

Outils pour convertir entre formats

Disposer des bons outils est essentiel pour appliquer la bonne stratégie de format dans votre workflow.

Outils en ligne

• imgpact : conversion rapide et optimisation d'images directement dans le navigateur, sans installation. Supporte JPEG, PNG, WebP, AVIF, SVG.
• Squoosh (Google) : outil en ligne open source pour comparer visuellement différents formats et paramètres.
• Cloudinary : solution cloud pour la gestion et la conversion automatique d'images en production.

Outils de ligne de commande

• ImageMagick : la référence open source pour la conversion et la manipulation d'images en batch.
• cwebp / dwebp : outils officiels Google pour encoder et décoder des fichiers WebP.
• cavif : encodeur AVIF en ligne de commande.
• Sharp (Node.js) : bibliothèque haute performance pour la transformation d'images en production.

Intégration dans les CMS

La plupart des CMS modernes proposent des plugins ou des fonctionnalités natives pour la conversion automatique :

• WordPress : plugins comme Imagify, ShortPixel ou WebP Express
• Shopify : conversion WebP automatique pour toutes les images de la boutique
• Next.js / Nuxt : composant Image avec optimisation et conversion automatiques