Introduction
Les images représentent en moyenne 42 % du poids total d'une page web selon HTTP Archive (2025). Choisir le bon format peut diviser par deux ou trois le poids de vos images sans perte de qualité perceptible — et donc accélérer considérablement le chargement de votre site.
Pourtant, beaucoup de développeurs et créateurs de contenu utilisent JPEG ou PNG par défaut, sans se poser la question du format le plus adapté. Faisons le point sur les options disponibles.
Les formats classiques
JPEG (Joint Photographic Experts Group)
Créé en 1992, le JPEG reste le format le plus utilisé sur le web pour les photographies.
Fonctionnement : compression avec perte basée sur la transformée en cosinus discrète (DCT). Le format exploite le fait que l'œil humain est moins sensible aux variations de couleur qu'aux variations de luminosité.
Points forts :
- Excellent ratio qualité/poids pour les photos
- Compatible avec 100 % des navigateurs
- Compression réglable (typiquement 60-85 % pour le web)
Points faibles :
- Pas de transparence
- Dégradation cumulative à chaque ré-enregistrement
- Artefacts visibles sur les aplats de couleur et le texte
- Pas d'animation
Usage idéal : photographies, images avec beaucoup de dégradés de couleurs.
PNG (Portable Network Graphics)
Créé en 1996 en remplacement du GIF (dont le format de compression LZW était breveté), le PNG offre une compression sans perte.
Points forts :
- Compression sans perte : qualité parfaite
- Transparence alpha (256 niveaux d'opacité)
- Excellent pour le texte, les logos et les illustrations avec des aplats
Points faibles :
- Fichiers beaucoup plus lourds que JPEG pour les photos
- Pas d'animation (APNG existe mais reste marginal)
Usage idéal : logos, captures d'écran, illustrations, tout ce qui nécessite de la transparence ou des contours nets.
GIF (Graphics Interchange Format)
Créé en 1987, le GIF est surtout connu pour les animations.
Points forts :
- Animation supportée partout
- Très léger pour les images simples (peu de couleurs)
Points faibles :
- Limité à 256 couleurs
- Compression moins efficace que PNG
- Les animations sont souvent très lourdes
Usage idéal : petites animations simples, mais préférez les vidéos ou les formats modernes pour les animations longues.
SVG (Scalable Vector Graphics)
Le SVG est un format vectoriel basé sur XML, fondamentalement différent des formats précédents.
Points forts :
- Résolution infinie (pas de pixellisation au zoom)
- Fichiers très légers pour les formes géométriques
- Manipulable en CSS et JavaScript
- Accessible (le texte SVG est lisible par les moteurs de recherche)
Points faibles :
- Inadapté aux photographies
- Peut devenir lourd pour des illustrations très complexes
- Risques de sécurité si le SVG contient du JavaScript (ne jamais accepter de SVG non fiables)
Usage idéal : icônes, logos, graphiques, illustrations géométriques.
Les formats modernes
WebP (Google, 2010)
Développé par Google, le WebP combine les avantages du JPEG et du PNG.
Points forts :
- 25-35 % plus léger que JPEG à qualité équivalente (étude Google)
- Supporte la transparence (comme PNG, mais plus léger)
- Supporte l'animation (remplacement de GIF)
- Mode avec et sans perte
Points faibles :
- Qualité légèrement inférieure à AVIF pour les mêmes tailles
- Encodage plus lent que JPEG
Compatibilité : supporté par tous les navigateurs modernes depuis 2020 (Chrome, Firefox, Safari 14+, Edge). Plus de 97 % des utilisateurs selon Can I Use.
AVIF (Alliance for Open Media, 2019)
Le format le plus récent et le plus performant, basé sur le codec vidéo AV1.
Points forts :
- 50 % plus léger que JPEG à qualité équivalente
- 20 % plus léger que WebP
- Excellente gestion des couleurs (HDR, gamut étendu)
- Transparence et animation supportées
Points faibles :
- Encodage très lent (10 à 20 fois plus lent que JPEG)
- Taille maximale limitée (selon l'implémentation)
- Support navigateur encore incomplet pour certaines fonctionnalités avancées
Compatibilité : Chrome 85+, Firefox 93+, Safari 16.4+. Environ 92 % des utilisateurs (Can I Use, 2025).
Comparaison pratique
Pour une même photo de 1920×1080 pixels à qualité perceptuellement identique :
| Format | Poids approximatif | Économie vs JPEG |
|---|---|---|
| JPEG (qualité 80) | 250 Ko | référence |
| PNG | 1 500 Ko | -500 % |
| WebP | 170 Ko | +32 % |
| AVIF | 130 Ko | +48 % |
La stratégie optimale : le format adaptatif
La meilleure approche est de servir le format optimal selon le navigateur de l'utilisateur grâce à la balise <picture> :
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" loading="lazy">
</picture>Le navigateur choisit le premier format qu'il supporte. Les navigateurs récents chargeront l'AVIF, les plus anciens se rabattront sur le WebP, et les très anciens utiliseront le JPEG.
Outils de conversion
En ligne de commande
- Sharp (Node.js) : la référence pour la conversion et le redimensionnement
- cwebp / avifenc : outils officiels pour WebP et AVIF
- ImageMagick : couteau suisse du traitement d'images
Services en ligne
- Squoosh (Google) : comparaison visuelle des formats dans le navigateur
- TinyPNG : compression en ligne de PNG et JPEG
- Cloudinary / Imgix : CDN d'images avec conversion automatique
Intégration dans le build
La plupart des frameworks modernes proposent une optimisation automatique des images :
- Next.js : composant
<Image>avec conversion automatique - Astro : intégration
@astrojs/image - Vite : plugins comme
vite-plugin-image-optimizer
Les images responsives
Au-delà du format, servir la bonne taille est tout aussi important. Un écran mobile de 375 px de large n'a pas besoin d'une image de 1920 px.
L'attribut srcset permet de proposer plusieurs tailles :
<img
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="photo-800.webp"
alt="Description"
loading="lazy"
>Conclusion
Le choix du format d'image n'est pas anodin : il impacte directement la vitesse de votre site, l'expérience utilisateur et votre référencement. Adoptez AVIF et WebP avec un fallback JPEG, servez des images responsives, et utilisez le lazy loading pour les images hors écran. Vos utilisateurs — et Google — vous remercieront.