Les images représentent environ 50 à 60 % du volume de données transférées par une page web. Choisir le bon format d'image est l'une des optimisations les plus efficaces pour améliorer les performances web. Voici un guide pratique des différents formats et de leurs cas d'utilisation.
Les formats que vous devez connaître
JPG (JPEG)
Le format JPG, un format éprouvé, est la norme pour les photographies sur le web depuis les années 1990. Il utilise une compression avec perte optimisée pour les photographies : dégradés de couleurs naturels, textures et scènes complexes.
Idéal pour : les photographies pour lesquelles WebP ou AVIF ne sont pas viables, ou pour lesquelles une compatibilité avec les formats existants est requise.
Points faibles : Formats plus grands que les formats modernes, absence de transparence, artefacts de compression de qualité inférieure.
PNG
Le format PNG est un format sans perte, idéal pour les graphiques aux couleurs unies, aux contours nets et aux fonds transparents.
Idéal pour : Logos, icônes, captures d'écran, éléments d'interface utilisateur, images nécessitant de la transparence.
Points faibles : Format beaucoup plus volumineux que le JPG pour les photos, chargement plus lent.
WebP
Le format WebP de Google offre une compression avec et sans perte, prend en charge la transparence et surpasse les formats JPG et PNG. Il est désormais le format par défaut recommandé pour les images web.
Idéal pour : Presque tout — photographies (remplace les JPG), logos/graphiques (remplace les PNG), images web en général.
Avantage en termes de taille de fichier : 25 à 35 % plus petit que le JPG pour une qualité visuelle équivalente ; similaire au PNG, mais souvent plus petit.
Compatibilité navigateurs : 97 % et plus (Chrome, Firefox, Safari, Edge — tous les navigateurs modernes).
AVIF
Dérivé du codec vidéo AV1, AVIF est le format d'image le plus récent et le plus répandu. Il offre une compression supérieure à celle de WebP, souvent 20 à 50 % plus légère à qualité équivalente.
Idéal pour : les images statiques où la compression maximale est la priorité et où vous contrôlez le processus serveur/de compilation.
Points faibles : L’encodage est plus lent (non idéal pour la génération en temps réel), les anciennes versions de navigateurs peuvent ne pas le prendre en charge.
Navigateurs compatibles : Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.
SVG
Le format SVG est un format vectoriel : les images y sont décrites par des tracés mathématiques, et non par des pixels. Les fichiers SVG sont indépendants de la résolution et généralement très petits pour les logos et les icônes.
Idéal pour : Logos, icônes, illustrations, graphiques, tout élément graphique nécessitant une mise à l'échelle à différentes tailles.
Ne convient pas aux : Photographies ou images présentant des dégradés et des textures complexes.
Matrice Format vs Cas d'utilisation
| Type de contenu | Format optimal | Format de repli |
|---|---|---|
| Photographie | AVIF | WebP → JPG |
| Photo du produit | WebP | JPG |
| Logo | SVG | PNG |
| Icône | SVG | PNG |
| Capture d'écran | WebP | PNG |
| Illustration | SVG ou WebP | PNG |
| Motif de fond | WebP | JPG |
| Animation | WebP | GIF |
Impact sur les performances : chiffres concrets
Conversion d'une photo de produit classique aux formats modernes :
| Format | Taille du fichier | Qualité |
|---|---|---|
| JPG (qualité 85) | 340 Ko | Référence |
| PNG | 1,2 Mo | Sans perte |
| WebP (qualité 80) | 210 Ko | ≈ JPG 85 |
| AVIF (qualité 60) | 155 Ko | ≈ JPG 85 |
Passer du format JPG au format WebP permet d'économiser environ 38 % de la taille des images. Sur une page contenant 20 images de produits, cela représente potentiellement des mégaoctets d'économies par chargement de page.
L'élément <picture> pour l'amélioration progressive
Si vous souhaitez servir du contenu AVIF avec WebP comme solution de repli et JPG comme solution de repli finale :
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Product photo" />
</picture>
Cela permet aux navigateurs modernes d'utiliser AVIF, aux navigateurs modernes plus anciens d'utiliser WebP et aux navigateurs hérités de se rabattre sur JPG, sans aucun JavaScript requis.
Qu’en est-il des indicateurs Web essentiels ?
La taille maximale du contenu (LCP) est l'un des indicateurs clés de Google Web Vitals et dépend fortement du temps de chargement des images. Utiliser WebP ou AVIF pour votre image principale et vos photos de produits peut améliorer directement votre score LCP, un signal de classement pour Google.
Conseils supplémentaires pour les images web :
- Ajoutez les attributs
widthetheightpour éviter les décalages de mise en page (CLS) - Utilisez
loading="lazy"pour les images situées sous le pli - Utilisez
fetchpriority="high"sur votre image LCP (généralement l'image principale).
Conversion de vos images
Vous pouvez convertir n'importe quelle image aux formats WebP, AVIF, PNG ou JPG grâce au convertisseur d'images de PicsSizer. Pour une optimisation par lots, le compresseur d'images vous permet d'ajuster la qualité afin d'obtenir un fichier aussi petit que possible sans perte de qualité visible.
Résumé : Valeurs par défaut recommandées en 2026
- Photographies sur le web → WebP (avec repli JPG via
<picture>) - Logos et icônes → SVG (format raster de repli : PNG)
- Captures d'écran et diagrammes → WebP (avec PNG en cas de repli)
- Compression maximale, ressources statiques → AVIF (avec WebP de repli)
- Anciens modèles d'e-mails → JPG ou PNG (format non pris en charge par les clients de messagerie modernes)
Foire aux questions
- Quel est le meilleur format d'image pour les sites web en 2026 ?
- WebP est le meilleur format polyvalent pour les sites web en 2026. Il offre des fichiers 25 à 35 % plus légers que le JPG à qualité équivalente, prend en charge la transparence comme le PNG et est entièrement compatible avec tous les navigateurs modernes. AVIF est encore plus performant, mais sa compatibilité avec les navigateurs est légèrement moins homogène. Utilisez le SVG pour les icônes et les logos.
- Dois-je convertir les images de mon site web au format WebP ?
- Oui. Convertir des images JPG et PNG au format WebP permet de réduire leur taille de 25 à 50 % sans perte de qualité visible. Des images plus légères se traduisent par un chargement de page plus rapide, de meilleurs scores Web Vitals et un référencement optimisé. Tous les principaux navigateurs prennent désormais en charge le format WebP.
- Qu'est-ce que l'AVIF et est-il meilleur que le WebP ?
- AVIF est un format d'image de nouvelle génération dérivé du codec vidéo AV1. Il offre une compression 20 à 50 % supérieure à celle de WebP à qualité égale. La compatibilité avec les navigateurs est désormais excellente (Chrome, Firefox, Safari 16+, Edge). En contrepartie, le temps d'encodage est plus long, ce qui le rend plus adapté aux images statiques pré-générées.
- Quand dois-je utiliser le format SVG plutôt que les formats raster ?
- Utilisez toujours le format SVG pour les logos, icônes, illustrations et tout graphique composé de formes géométriques. Le format SVG est indépendant de la résolution (il reste net sur tous les écrans), offre des fichiers de petite taille pour les graphiques simples et s'adapte parfaitement à toutes les dimensions. Le format SVG est déconseillé pour les photographies.
- Le format d'image a-t-il une incidence sur le référencement (SEO) ?
- Oui, indirectement. La vitesse de chargement des pages est un critère de classement pour Google, et les formats d'image influent directement sur le poids de votre page. Utiliser des formats modernes comme WebP ou AVIF au lieu de JPG/PNG peut améliorer les Core Web Vitals (notamment le LCP), ce qui a un impact sur votre référencement.