Formats nouvelle génération pour Lighthouse
Cet audit signifie WebP ou AVIF. Voici le balisage qui y répond tout en préservant le fonctionnement des anciens navigateurs.
L'avertissement de Lighthouse signifie que vous devez convertir vos fichiers JPEG et PNG en WebP ou AVIF, puis les diffuser via un élément picture avec l'original en guise de solution de repli. Cet audit est l'un des plus faciles à valider, car la correction est d'ordre mécanique plutôt qu'architectural.
Lighthouse déclenche cet avertissement lorsqu'il détecte des images dont il estime que la taille serait nettement inférieure dans un format moderne. Cette estimation repose sur le fichier téléchargé, de sorte que l'économie signalée est généralement réalisable et parfois même prudente.
Ce que Lighthouse mesure
Lighthouse réencode chaque image en WebP en interne et signale la différence lorsque l'économie dépasse un certain seuil. Le chiffre figurant dans le rapport est une estimation réelle plutôt qu'une recommandation générique.
Les images situées sous ce seuil sont ignorées, c'est pourquoi une page contenant 30 images peut n'en afficher que 4 dans l'audit. Les fichiers listés sont ceux qu'il convient de corriger en priorité. Les traiter permet généralement de faire disparaître complètement l'avertissement, même si d'autres images de la page restent dans des formats plus anciens.
Le balisage qui valide l'audit
Utilisez un élément picture avec l'AVIF en premier, le WebP en second et le JPEG d'origine dans la balise img. Le navigateur choisit la première source qu'il comprend, de sorte que les navigateurs récents reçoivent le petit fichier tandis que les plus anciens affichent toujours une image.
La balise img doit impérativement rester, car elle porte le texte alternatif, les dimensions et l'image de repli. L'omission des attributs de largeur et de hauteur provoque un décalage de mise en page lors du chargement des images, ce qui nuit à une autre mesure des Core Web Vitals tout en corrigeant celle-ci. Définissez ces deux attributs sur la taille en pixels réels de l'image de repli.
Comment valider l'audit
Pour résoudre correctement cet avertissement, suivez ces 6 étapes.
- Ouvrez le rapport Lighthouse et listez les images qu'il mentionne, qui sont celles présentant des économies mesurables.
- Vérifiez la taille d'affichage de chaque image, car beaucoup sont surdimensionnées en plus d'être au mauvais format.
- Redimensionnez chaque image à sa largeur d'affichage réelle, doublée pour les écrans haute densité.
- Convertissez en WebP avec une qualité de 80, et en AVIF avec une qualité de 65 pour les plus grandes images de la page.
- Diffusez les résultats via un élément picture avec l'original comme repli dans la balise img.
- Relancez Lighthouse pour confirmer que l'avertissement a disparu et qu'aucun décalage de mise en page n'est apparu.
L'étape 3 est plus importante que l'étape 4. Les dimensions déterminent la majeure partie de la taille du fichier, et un WebP surdimensionné reste une image surdimensionnée. La conversion par lots prend quelques minutes, tandis que l'écriture du balisage prend généralement plus de temps.
Quel format pour quelle image
| Image | Format recommandé | Qualité | Raison |
|---|---|---|---|
| Bannière principale | AVIF avec repli WebP | 60 à 70 | Fichier le plus lourd, plus grande économie |
| Photo dans un article | WebP | 75 à 80 | Rapide à encoder, très bien supporté |
| Photo de produit | WebP | 80 | Les détails comptent pour les acheteurs |
| Logo ou icône avec transparence | WebP sans perte | Lossless | Surpasse le PNG de 20 à 30 % |
| Icône de moins de 5 KB | PNG ou SVG | Non applicable | Les formats modernes ajoutent une surcharge inutile |
Votre plateforme le fait-elle déjà
De nombreux systèmes de gestion de contenu et hébergeurs convertissent les images automatiquement, vérifiez donc avant de coder quoi que ce soit à la main. Faire le travail deux fois est fréquent et inutile.
Faites le test en 2 minutes. Ouvrez la page publiée, faites un clic droit sur une image et ouvrez-la dans un nouvel onglet, puis lisez l'extension du fichier dans la barre d'adresse. Une extension .webp sur un fichier que vous avez téléversé en JPEG signifie que la plateforme effectue déjà la conversion. Shopify, la plupart des hébergeurs WordPress gérés et plusieurs constructeurs de sites le font par défaut.
Pourquoi l'avertissement réapparaît parfois
Les nouveaux téléversements réintroduisent le problème lorsque l'étape de conversion est manuelle plutôt qu'automatique. Un site corrigé en janvier affichera à nouveau l'avertissement d'ici juin si les éditeurs téléversent les fichiers directement depuis un appareil photo.
Corrigez le processus plutôt que les fichiers seuls. Activez la conversion automatique au niveau de la plateforme, ou convenez d'une règle simple stipulant que les images doivent être redimensionnées et converties avant d'être téléversées. Mettre cette règle par écrit est indispensable sur tout site où plusieurs personnes publient, car l'audit mesure la pire image et non la moyenne.
Faut-il utiliser l'AVIF, le WebP, ou les deux
Utilisez le WebP seul sur la plupart des sites, et ajoutez l'AVIF uniquement pour les plus grandes images de la page. Prendre en charge les deux double le nombre de fichiers à générer, stocker et synchroniser pour un gain minime sur les images ordinaires.
Le calcul change pour les sites riches en photographies, où l'AVIF permet d'économiser 20 à 30 % supplémentaires sur des fichiers qui se mesurent déjà en centaines de kilo-octets. Sur une page contenant une image principale de 600 KB, la réduction est bien réelle. Sur une page de vignettes de 40 KB, le pipeline supplémentaire demande plus d'efforts qu'il n'en rapporte, et le WebP seul suffit à valider l'audit.
Vérifier correctement le résultat
Relancez Lighthouse dans une fenêtre de navigation privée avec les extensions désactivées, car les extensions de navigateur faussent les mesures. Les scores varient également d'un test à l'autre, comparez donc 3 lancements plutôt que de vous fier à un seul chiffre.
Vérifiez que le navigateur reçoit bien le nouveau format au lieu de le supposer. Ouvrez les outils de développement, allez sur l'onglet Réseau, filtrez par images et rechargez la page. La colonne Type indique ce qui a réellement été envoyé. Une page qui sert toujours du JPEG après une conversion signifie généralement que le balisage de l'élément picture est incorrect, ou qu'une couche de cache conserve la version précédente.
Audits connexes qui apparaissent à ses côtés
- Dimensionnez correctement les images. L'image est plus grande que l'espace dans lequel elle s'affiche. Redimensionnez plutôt que de compresser.
- Encodez les images de manière efficace. La compression est trop faible. Diminuez le paramètre de qualité.
- Différez le chargement des images hors écran. Ajoutez le chargement différé (lazy loading) aux images situées sous la ligne de flottaison.
- Élément Largest Contentful Paint. Il s'agit généralement de votre image principale, qui mérite d'être traitée en priorité.
- Les éléments d'image n'ont pas de largeur et de hauteur explicites. Ajoutez ces deux attributs pour éviter les décalages de mise en page.
Ces 5 audits apparaissent généralement ensemble, et le fait de redimensionner et de convertir les images nommées dans le rapport permet de résoudre la plupart d'entre eux en une seule fois.
À quel point cela améliore-t-il réellement une page
La conversion vers des formats modernes réduit généralement le poids des images de 25 à 35 %, et le redimensionnement préalable permet souvent d'économiser bien plus. Sur une page riche en images, l'effet combiné atteint souvent 70 à 80 %.
L'amélioration se ressent sur le Largest Contentful Paint, qui mesure la rapidité d'apparition du contenu principal. Cette mesure est généralement déterminée par une seule image, de sorte que la réduction du fichier principal a un impact disproportionné par rapport à sa part sur la page. Réduire 20 petites images importe moins que d'en réduire 1 grande.
Ce qu'il ne faut pas faire
Ne supprimez pas le repli JPEG, et ne convertissez pas les images que les visiteurs doivent télécharger. Ces deux erreurs sacrifient une fonctionnalité réelle pour une légère amélioration de score.
Les dossiers de presse, les guides imprimables, les modèles téléchargeables et les fichiers de fournisseurs doivent rester en JPEG ou PNG, car le WebP est difficile à gérer en dehors des navigateurs. Diffuser ces fichiers dans des formats modernes génère des demandes d'assistance de la part d'utilisateurs qui ne peuvent pas les ouvrir, ce qui coûte plus cher que la bande passante économisée.
Convertir les images nommées dans le rapport
Convertissez à partir des fichiers originaux plutôt qu'à partir des versions déjà publiées, car un JPEG compressé transmet ses dégradations au nouveau fichier. L'encodeur ne peut pas distinguer les artefacts existants des détails réels et consomme des octets pour les préserver.
Déposez jusqu'à 500 fichiers à la fois, ou glissez-déposez directement une archive ZIP, et l'ensemble se convertit en une seule fois. Tout s'exécute dans votre navigateur sur votre propre processeur, de sorte que les sites clients, les ressources de préproduction et les pages non publiées ne transitent jamais par un serveur. La conversion d'un site complet se termine en quelques minutes sans qu'un seul fichier ne traverse le réseau.
Conservez les fichiers convertis aux côtés des originaux en utilisant des noms identiques, afin que le balisage de l'élément picture puisse être généré selon un modèle prévisible plutôt qu'édité à la main pour chaque image. Un dossier contenant hero.jpg, hero.webp et hero.avif est simple à intégrer dans un gabarit, et transforme la prochaine migration de format en une simple conversion par lots plutôt qu'en une réécriture de chaque page.