Format WebP / AVIF
Formats d’images de nouvelle génération offrant une compression supérieure et une qualité visuelle préservée pour le web.
Définition
Les formats WebP (développé par Google) et AVIF (basé sur le codec vidéo AV1) sont des alternatives modernes aux traditionnels JPEG et PNG. Ils permettent de réduire le poids des fichiers de 30% à plus de 50% à qualité équivalente, tout en supportant la transparence (canal alpha) et les animations.
Bonnes pratiques
- Implémenter progressivement : Commencer par convertir les images les plus lourdes et utiliser la balise HTML
<picture>pour gérer un fallback (repli) vers le format JPEG/PNG pour les anciens navigateurs. - Mesurer avec Lighthouse : Vérifier le gain sur le LCP (Largest Contentful Paint) et le poids total de la page après la conversion.
- Automatiser le monitoring : Utiliser des outils de serveur (type Cloudinary) ou des extensions CMS pour générer automatiquement ces formats lors de l’upload.
À éviter
- Chargements bloquants : Éviter de servir des images AVIF très haute résolution sans compression, car le décodage par le processeur du client peut être plus lent sur mobile.
- Assets non optimisés : Ne pas se contenter de changer l’extension du fichier ; une véritable conversion via un algorithme de compression est nécessaire.
- Modifications non mesurées : Remplacer l’intégralité du catalogue d’images sans vérifier la compatibilité des navigateurs cibles de l’audience.
- Ils font confiance à Devsource