Formats d'image pour le web : lequel choisir
JPEG, PNG, WebP, SVG : quel format d'image utiliser selon le contenu, pour un site rapide et net.
Comparatif rapide
| Format | Compression | Transparence | Idéal pour |
|---|---|---|---|
| JPEG | Avec perte | Non | Photos, dégradés complexes |
| PNG | Sans perte | Oui | Logos, captures d'écran, icônes |
| WebP | Avec ou sans perte | Oui | Remplace JPEG/PNG, fichiers plus légers |
| SVG | Vectoriel (pas de pixels) | Oui | Logos, icônes, illustrations simples |
| AVIF | Avec ou sans perte | Oui | Le plus compact, support navigateur récent |
SVG est le seul format vectoriel de cette liste : il s'agrandit à l'infini sans perte de netteté, contrairement aux formats "raster" (pixels) comme JPEG, PNG ou WebP.
Quand utiliser quoi
- Photo réaliste → JPEG ou WebP (compression avec perte adaptée aux dégradés naturels).
- Logo ou icône avec formes simples → SVG (net à toute taille, fichier très léger).
- Capture d'écran avec texte net → PNG (sans perte, évite le flou autour du texte).
- Image avec transparence → PNG, WebP ou SVG (jamais JPEG, qui ne gère pas la transparence).
Poids et performance
Le poids des images est souvent la première cause de lenteur d'un site web. WebP et AVIF réduisent le poids de 25 à 50% par rapport à un JPEG/PNG équivalent, à qualité visuelle comparable.
Résolution ou compression ?
Deux leviers distincts pour réduire le poids d'une image : réduire ses dimensions en pixels (résolution) OU augmenter la compression à dimensions égales (qualité). Les deux se combinent pour un résultat optimal.
Chargement adaptatif avec <picture>
<picture> <source srcset="photo.avif" type="image/avif"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Description"> </picture>
Le navigateur choisit automatiquement le premier format qu'il sait afficher, avec un <img> classique en secours (fallback) — permet de profiter d'AVIF/WebP sans casser l'affichage sur un navigateur plus ancien.
GIF vs vidéo courte
Un GIF animé est souvent bien plus lourd qu'une vidéo courte de qualité équivalente (MP4/WebM) — pour une animation répétée en boucle, une balise <video autoplay loop muted> est presque toujours préférable en poids et en netteté.
Merci pour votre retour !