Utilisez l'élément HTML '<'picture> pour servir des formats modernes avec fallback automatique — les navigateurs choisissent le premier format qu'ils supportent :
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
srcset pour différentes largeurs de viewportloading="lazy" pour les images sous la ligne de flottaisonPour en savoir plus sur l'optimisation, consultez notre Guide d'optimisation des images.
AVIF offre la meilleure compression (20-50% meilleure que WebP, 50-80% meilleure que JPEG) mais a un support navigateur légèrement inférieur à WebP. WebP est supporté par tous les navigateurs modernes (95%+ mondialement). Utilisez l'élément '<'picture> avec AVIF en source principale, WebP en fallback et JPEG/PNG en fallback final.
Utilisez PNG quand vous avez besoin : (1) de transparence/canal alpha, (2) d'une qualité sans perte pour des captures d'écran ou des images chargées de texte, (3) d'images avec des bords nets comme des logos ou des diagrammes. Utilisez JPEG pour les photos où certaines données de couleur peuvent être abandonnées.
SVG est idéal pour les logos, icônes et illustrations. Basé sur des vecteurs, il est net à toute résolution et a une petite taille de fichier. Si SVG n'est pas possible, utilisez WebP ou PNG avec transparence.
Utilisez l'élément <picture> : d'abord <source type='image/avif'>, puis WebP, enfin JPEG/PNG comme élément <img>. Les navigateurs sélectionnent automatiquement le format supporté.