La section "Opportunités" de votre rapport Lighthouse liste toutes les images de votre page dont la taille n'est pas adaptée, ainsi que les économies potentielles en kilo-octets (Ko). Redimensionnez ces images pour économiser des données et améliorer le temps de chargement de la page:
Comment Lighthouse calcule-t-il les images trop grandes ?
Pour chaque image de la page, Lighthouse compare la taille de l'image affichée à celle de l'image réelle. La taille de rendu tient également compte du rapport de pixels de l'appareil. Si la taille de rendu est inférieure d'au moins 4 ko à la taille réelle, l'audit échoue.
Stratégies pour dimensionner correctement les images
Idéalement, votre page ne doit jamais diffuser d'images plus grandes que la version affichée sur l'écran de l'utilisateur. Tout élément supérieur à cette valeur ne sert qu'à gaspiller des octets et ralentit le temps de chargement de la page.
La stratégie principale pour diffuser des images de taille appropriée est appelée "images responsives". Avec les images responsives, vous générez plusieurs versions de chaque image, puis spécifiez la version à utiliser dans votre code HTML ou CSS à l'aide de requêtes média, de dimensions de fenêtre, etc. De plus, RespImageLint est un bookmarklet utile pour identifier les valeurs srcset et sizes optimales pour vos images. Pour en savoir plus sur ces attributs, consultez Diffuser des images responsives.
Les CDN d'images constituent une autre stratégie principale pour diffuser des images de taille appropriée. Vous pouvez considérer les CDN d'images comme des API de service Web permettant de transformer des images.
Une autre stratégie consiste à utiliser des formats d'images vectorielles, comme le format SVG. Avec une quantité limitée de code, une image SVG peut être mise à l'échelle de n'importe quelle taille. Pour en savoir plus, consultez Remplacer des icônes complexes par des SVG.
Des outils tels que gulp-responsive ou responsive-images-generator peuvent vous aider à automatiser le processus de conversion d'une image en plusieurs formats. Il existe également des CDN d'images qui vous permettent de générer plusieurs versions, que vous importiez une image ou que vous la demandiez depuis votre page.
Conseils spécifiques à la pile
AMP
Utilisez la compatibilité du composant amp-img avec srcset pour spécifier les éléments image à utiliser en fonction de la taille de l'écran. Consultez également la section Images responsives avec les attributs srcset, sizes et heights.
Angular
Vous pouvez gérer les points d'arrêt d'image à l'aide de l'utilitaire BreakpointObserver du kit de développement de composants (CDK).
Drupal
Assurez-vous d'utiliser les styles d'images responsifs natifs fournis par Drupal. Utilisez Responsive Image Styles lors du rendu des champs d'image par les modes Vue, les vues ou les images importés via l'éditeur WYSIWYG.
Gatsby
Utilisez le plug-in gatsby-image pour générer plusieurs images plus petites pour les smartphones et les tablettes. Il peut également créer des espaces réservés aux images SVG pour un chargement différé efficace.
Joomla
Pensez à utiliser un plug-in d'images responsives.
WordPress
Importez des images directement via la bibliothèque multimédia pour vous assurer que les tailles d'images requises sont disponibles. Ensuite, insérez-les depuis la bibliothèque multimédia ou utilisez le widget d'image pour vous assurer que les tailles d'images optimales sont utilisées (y compris celles pour les points d'arrêt réactifs). Évitez d'utiliser les images Full Size, sauf si les dimensions sont adéquates pour l'utilisation prévue. Consultez Insérer des images dans des posts et des pages.