Les images représentent souvent 60 à 70% du poids d'une page web. Choisir le bon format, la bonne résolution et le bon niveau de compression peut diviser ce poids par trois sans perte visible de qualité.
Les images sont le premier levier d'optimisation des performances web. Pourtant, choisir entre JPEG, PNG, WebP, AVIF ou SVG reste source de confusion. Voici un guide pratique basé sur les usages réels.
Les formats en bref
- JPEG : compression avec pertes, idéal pour les photos. Qualité 75-85% = excellent ratio poids/qualité. Pas de transparence. Support universel.
- PNG : compression sans perte, supporte la transparence. À réserver pour les logos, icônes, captures d'écran avec du texte. Beaucoup plus lourd que JPEG pour les photos.
- WebP : format Google, 25-35% plus léger que JPEG à qualité équivalente. Supporte la transparence et l'animation. Support navigateur excellent (95%+). À préférer à JPEG dans la plupart des cas.
- AVIF : format next-gen, 40-50% plus léger que JPEG. Qualité exceptionnelle aux faibles bitrates. Support en progression rapide (Chrome, Firefox, Safari). L'avenir du format image web.
- SVG : format vectoriel, idéal pour icônes, logos, illustrations. Infiniment scalable, très léger pour les graphiques simples. Ne pas utiliser pour les photos.
- GIF : à éviter. Limité à 256 couleurs, souvent remplacé par WebP animé ou vidéo MP4.
Dimensions selon l'usage
- Hero / bannière : 1920 × 1080px max, utiliser
srcsetpour servir 800px sur mobile - Card / vignette : 600-800px de large
- Thumbnail : 200-400px
- Favicon : 32×32 et 180×180 (Apple touch icon)
- Open Graph : 1200×630px exactement
Niveaux de compression recommandés
Pour WebP : qualité 75-82 pour les photos, 85-90 pour les visuels avec texte. Pour AVIF : qualité 60-70 donne des résultats proches du WebP 80. Toujours comparer visuellement — les chiffres seuls ne suffisent pas.
Outils indispensables
- Squoosh (squoosh.app) : comparaison visuelle des formats et compressions, directement dans le navigateur
- Sharp (Node.js) : traitement d'images en pipeline, conversion WebP/AVIF automatique
- ImageMagick : outil CLI universel pour la conversion et le redimensionnement en lot
- Cloudinary / Imgix : CDN d'images avec optimisation automatique à la volée
- Balise
<picture>+srcset: servir le bon format et la bonne taille selon le navigateur et l'écran