Améliorer l'affichage des images

L'insight Améliorer l'affichage des images met en évidence les différentes façons dont la taille des fichiers de vos images devrait être réduite afin d'accélérer leur chargement. Cet aperçu identifie les images spécifiques présentant des problèmes et suggère des moyens de réduire leur taille.

Réduire le temps de téléchargement des images peut améliorer le temps de chargement perçu de la page et le LCP. En savoir plus sur l'optimisation de la taille des images

Comprendre Améliorer l'affichage des images

Il existe divers audits liés à l'amélioration l'affichage des images. Chacun d'entre eux est décrit ci-dessous, accompagné d'explications sur son incidence sur la vitesse de chargement des images.

Augmenter le facteur de compression de l'image

Cette suggestion concerne la compression des images afin de réduire la taille des fichiers tout en affectant le moins possible, voire pas du tout, la qualité visuelle des images. La solution la plus simple consiste souvent à utiliser un plugin d'optimisation d'images tel qu' Imagify.

Utiliser des formats d'image modernes

Il est recommandé de convertir les images vers des formats modernes tels que WebP ou AVIF car ils offrent généralement des fichiers encore plus petits que les images PNG ou JPG compressées. Les plugins d'optimisation d'images tels que Imagify le fera pour vous.

Diffuser des images de taille responsive

Plus la largeur et la hauteur intrinsèques d'une image en pixels sont importantes, plus la taille du fichier est importante (toutes choses égales par ailleurs). Il est donc recommandé que les images soient aussi proches que possible de la largeur et de la hauteur en pixels auxquelles elles sont affichées sur une page.

Par exemple, une image de 1000 pixels sur 1000 pixels ne doit pas être affichée sur une page à une taille de 500 pixels sur 500 pixels. Il convient plutôt de créer plusieurs tailles de la même image, et des images de taille responsive ou les éléments picture doit être utilisé pour permettre au navigateur de sélectionner la taille la plus appropriée dans différents contextes (ordinateur de bureau, tablette, mobile).

Utiliser des formats vidéo pour le contenu animé

Évitez d'utiliser des GIF animés pour les courts extraits de contenu animé, car leur taille de fichier est inutilement importante. Convertissez-les plutôt au format MPEG ou WebM et utilisez l'élément vidéo HTML5 en suivant les étapes décrites dans ce guide.

Comment améliorer l'affichage des images ?

WP Rocket n'est pas conçu pour compresser les images ou créer des versions WebP ou AVIF, nous vous recommandons donc Imagify pour ça.

Ressources supplémentaires

Google’s Improve Image Delivery Insight: What It Is & How to Fix It