La section "Opportunités" de votre rapport Lighthouse répertorie toutes les images de votre page qui ne sont pas dimensionnées de manière appropriée, ainsi que les économies potentielles en kibioctets (Kio). Redimensionnez ces images pour économiser des données et réduire le temps de chargement des pages:
Comment Lighthouse calcule les images surdimensionnées
Pour chaque image de la page, Lighthouse compare la taille de l'image rendue à celle de l'image réelle. La taille de rendu tient également compte du ratio de pixels de l'appareil. Si la taille de rendu est inférieure d'au moins 4 Kio à la taille réelle, l'image échoue à l'audit.
Stratégies pour dimensionner correctement les images
Idéalement, votre page ne doit jamais diffuser d'images dont la taille est supérieure à celle affichée sur l'écran de l'utilisateur. Au-delà, les octets sont gaspillés et le temps de chargement des pages est ralenti.
Les "images responsives" constituent la principale stratégie de diffusion d'images de taille appropriée. 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, des dimensions de la fenêtre d'affichage, etc. De plus, RespImageLint est un favorilet 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 d'une taille appropriée. Les CDN d'images sont comparables à des API de services Web permettant de transformer des images.
Une autre stratégie consiste à utiliser des formats d'image vectoriels, tels que SVG. Avec une quantité limitée de code, une image SVG peut s'adapter à n'importe quelle taille. Pour en savoir plus, consultez Remplacer des icônes complexes par des images SVG.
Des outils tels que gulp-responsive ou responsive-images-generator peuvent vous aider à automatiser le processus de conversion d'une image dans plusieurs formats. Il existe également des CDN d'images qui vous permettent de générer plusieurs versions, lorsque vous importez une image ou que vous la demandez à partir de votre page.
Conseils spécifiques à la pile
AMP
Utilisez la compatibilité du composant amp-img avec srcset pour spécifier les composants Image à utiliser en fonction de la taille de l'écran. Consultez également la section Images responsives avec srcset, tailles et hauteurs.
Angular
Pensez à utiliser l'utilitaire BreakpointObserver du kit de développement de composants (CDK) pour gérer les points d'arrêt d'image.
Drupal
Utilisez la fonctionnalité intégrée Responsive Image Styles (disponible dans Drupal 8 et versions ultérieures) lorsque vous affichez des champs d'image via les modes d'affichage, les vues ou les images importées via l'éditeur WYSIWYG.
Gatsby
Utilisez le plug-in gatsby-image afin de générer plusieurs images plus petites pour les smartphones et les tablettes. Il peut également créer des espaces réservés d'images SVG pour un chargement différé efficace.
Joomla
Envisagez d'utiliser un plug-in d'images responsives.
WordPress
Importez les images directement via la bibliothèque multimédia pour vous assurer que les tailles d'image requises sont disponibles, puis insérez-les à partir de la bibliothèque multimédia ou utilisez le widget d'image pour vous assurer que les tailles d'image optimales sont utilisées (y compris celles pour les points d'arrêt responsifs). Évitez d'utiliser des images Full Size, sauf si les dimensions sont adaptées à leur utilisation. Consultez Insérer des images dans des posts et des pages.