Comparaison des formats d'image : WebP vs AVIF
Comparez les formats d'image modernes et voyez comment les paramètres de qualité affectent la taille des fichiers. Découvrez quand utiliser WebP ou AVIF pour des performances web optimales.
Réduction moyenne
Réduction moyenne
Modern browsers
Comparaison des tailles de fichiers
Format WebP
Format AVIF
Points clés de Chrome Performance
AVIF et WebP sont des formats d'image modernes avec une compression supérieure par rapport aux formats JPEG et PNG traditionnels.
AVIF offre une compression supérieure avec les plus petites tailles de fichier. Pris en charge par tous les navigateurs modernes (Chrome 85+, Firefox 93+, Safari 16+).
WebP offre une excellente compression avec une prise en charge plus large des navigateurs, y compris les anciens navigateurs et les anciennes versions iOS (iOS 14+).
- 1.Augmenter le facteur de compression (plage de qualité 30-70)
- 2.Utiliser des formats modernes (AVIF/WebP au lieu de JPEG/PNG)
- 3.Servir des tailles responsive avec srcset et les éléments picture
- 4.Envisager l'utilisation d'un CDN d'images pour l'optimisation automatique
Quand utiliser chaque format
- ✓Vous avez besoin de la plus petite taille de fichier possible
- ✓Ciblant uniquement les navigateurs modernes
- ✓Pour les images hero et le contenu above-the-fold
- ✓Vous avez besoin d'une prise en charge plus large des navigateurs
- ✓L'équilibre entre taille de fichier et compatibilité est important
- ✓Support des anciens appareils iOS requis
Utilisez l'élément HTML picture pour servir AVIF avec un fallback WebP pour une compatibilité maximale :
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback">
</picture>En savoir plus sur Chrome Performance Insights