Diffuser des images dans des formats modernes

La section "Opportunités" de votre rapport Lighthouse répertorie toutes les images dans d'anciens formats, montrant les économies potentielles réalisées en diffusant les versions AVIF de ces images:

Capture d'écran de l'audit des images Lighthouse Serve dans les formats modernes

Pourquoi diffuser des images au format AVIF ou WebP ?

Les formats d'image AVIF et WebP présentent des caractéristiques de compression et de qualité supérieures à celles des formats JPEG et PNG plus anciens. L'encodage de vos images dans ces formats plutôt que dans JPEG ou PNG signifie qu'elles se chargent plus rapidement et consomment moins de données mobiles.

Le format AVIF est compatible avec Chrome, Firefox et Opera, et offre une taille de fichier inférieure à celle d'autres formats ayant les mêmes paramètres de qualité. Pour en savoir plus sur ce format, consultez l'atelier de programmation sur la diffusion d'images AVIF.

WebP est compatible avec les dernières versions de Chrome, Firefox, Safari, Edge et Opera, et offre une meilleure compression avec et sans perte pour les images sur le Web. Pour en savoir plus sur WebP, consultez A New Image Format For the Web (Nouveau format d'image pour le Web).

Comment Lighthouse calcule-t-il les économies potentielles ?

Lighthouse collecte chaque image BMP, JPEG et PNG sur la page, convertit chaque image au format WebP et estime la taille du fichier AVIF, en rapportant les économies potentielles en fonction des chiffres de conversion.

Compatibilité du navigateur

WebP est compatible avec les dernières versions de Chrome, Firefox, Safari, Edge et Opera, tandis que la compatibilité avec AVIF est plus limitée. Vous devrez diffuser une image PNG ou JPEG de remplacement pour les anciens navigateurs compatibles. Consultez la section Comment détecter la compatibilité du navigateur avec WebP ? pour obtenir un aperçu des techniques de remplacement et la liste ci-dessous pour connaître la compatibilité des navigateurs avec les formats d'image.

Pour connaître les navigateurs actuellement compatibles avec chaque format moderne, consultez les entrées ci-dessous:

Conseils spécifiques à la pile

AMP

Envisagez d'afficher tous les composants amp-img au format WebP tout en spécifiant une solution de remplacement appropriée pour les autres navigateurs.

Drupal

Envisagez d'installer et de configurer un module permettant d'exploiter les formats d'image WebP sur votre site. Ces modules génèrent automatiquement une version WebP des images importées pour optimiser les temps de chargement.

Joomla

Envisagez d'utiliser un plugin ou un service qui convertit automatiquement vos images importées dans des formats optimaux.

Magento

Vous pouvez rechercher de nombreuses extensions tierces sur la place de marché Magento afin d'exploiter les nouveaux formats d'image.

iPhone

Notez que les images WebP, AVIF et WebM ne fonctionnent pas sur les iPhone dotés d'une version antérieure à iOS 16.

WordPress

Envisagez d'utiliser un plugin ou un service qui convertit automatiquement vos images importées dans des formats optimaux.

Ressources