Les performances Web modernes reposent en grande partie sur l'optimisation des ressources, avec un accent considérable sur les images. Les images représentent une part importante des données utilisées par les sites Web. Par conséquent, la diffusion d'images dans les formats les plus efficaces peut avoir un impact profond sur les performances du site, l'expérience utilisateur et le classement SEO. L'outil d'audit Lighthouse de Google fournit des informations essentielles pour aider à réaliser cette optimisation, dont l'une est la possibilité de "Servir des images dans des formats modernes". Cette fonctionnalité, située dans la section Opportunités du rapport Lighthouse, identifie toutes les images d'un site qui sont dans des formats plus anciens, suggérant des gains de performances potentiels qui pourraient être obtenus en diffusant ces images dans des formats modernes, tels que AVIF et WebP.
Le problème avec les formats d'image traditionnels
De nombreux sites Web utilisent encore des formats traditionnels tels que JPEG, PNG et GIF pour leurs images. Bien que ces formats aient leurs points forts et aient bien servi le Web pendant des années, ils ne sont pas aussi efficaces que certains des formats modernes en matière de compression et de qualité. Ces formats plus anciens entraînent souvent des fichiers de plus grande taille, ce qui peut ralentir les performances du site, en particulier pour les utilisateurs disposant de connexions Internet plus lentes ou sur des appareils mobiles.
La promesse des formats d'image modernes
Ces dernières années, deux formats sont apparus comme des options supérieures pour les images Web : AVIF et WebP.
AVIF , ou AV1 Image File Format, est basé sur le format de codage vidéo AV1 développé par l'Alliance for Open Media. Il offre des gains de compression significatifs par rapport aux anciens formats, ce qui signifie qu'il peut fournir des images de haute qualité à des tailles de fichiers beaucoup plus petites. Cela fait d'AVIF un excellent choix pour les sites Web avec un contenu d'image lourd.
WebP , développé par Google, offre également des capacités de compression impressionnantes, notamment pour les images avec transparence (canaux alpha), où il surpasse nettement le PNG. Ce format prend en charge la compression avec et sans perte, permettant aux développeurs d'équilibrer la qualité de l'image et la taille du fichier en fonction de leurs besoins.
Identifier les opportunités avec Lighthouse
L'outil Lighthouse est essentiel pour repérer les opportunités d'amélioration des performances du site. En analysant les ressources d'un site, il fournit une liste de toutes les images actuellement diffusées dans des formats plus anciens. Ce rapport détaillé montre les économies potentielles en kilo-octets (Ko) ou en mégaoctets (Mo) qui pourraient être réalisées en convertissant ces images dans des formats modernes.
Pour chaque image, Lighthouse calcule la différence entre la taille de fichier actuelle et la taille de fichier estimée si elle était servie dans un format moderne. Il présente ensuite ces économies potentielles, offrant aux développeurs des indications claires sur les gains de performances possibles qui pourraient être obtenus.
Mise en œuvre du changement
Après avoir identifié les images à convertir, l'étape suivante consiste à générer des versions AVIF ou WebP de ces images. Plusieurs outils et bibliothèques sont disponibles pour cela, notamment Squoosh , une application Web de compression d'images en ligne développée par Google, et ImageMagick , une suite logicielle robuste qui gère la conversion et la manipulation d'images.
Une fois les images converties, elles doivent être diffusées aux utilisateurs d'une manière compatible avec leurs navigateurs. Cela implique souvent l'utilisation de l'élément HTML "image" ou de méthodes similaires, qui permettent de diffuser différentes versions d'une image en fonction des capacités du navigateur.
Conclusion
La diffusion d'images dans des formats modernes est un élément crucial de l'optimisation des performances Web. En tirant parti de la fonctionnalité "Servir des images dans des formats modernes" de Lighthouse, les développeurs Web peuvent facilement identifier les économies potentielles offertes par ces formats. Adopter AVIF et WebP n'améliore pas seulement les performances du site ; cela améliore l'expérience utilisateur et pourrait avoir un impact positif sur les classements SEO. Les formats d'image modernes sont là pour rester, et les exploiter à leur plein potentiel est une opportunité à ne pas manquer.
