Lazy loading : optimiser les médias et leur affichage ?

Vous vous demandez si toutes vos images doivent obligatoirement être au format 3840 x 2160 ? Est-il nécessaire de charger celles qui ne sont pas visibles à l'écran ? Dans cet article, nous aborderons ces questions et explorerons des solutions d'optimisation, notamment grâce à la technique du lazy loading.

Médias et affichages : des problématiques de performances

Nos sites web deviennent de plus en plus volumineux et leur temps de chargement s'allonge. Cette situation découle fréquemment de l'utilisation d'images excessivement lourdes et de dimensions considérables. Par exemple, il n'est pas nécessaire d'afficher des images en résolution 4K sur un écran de 15 pouces.

Il existe plusieurs outils pour optimiser vos images et les rendre plus légères.

Quelques liens :

• JPG to WEBP
• PNG to WEBP
• Compression JPG
• Compression PNG

Un peu de contexte

Lorsque vous utilisez des carrousels pour présenter vos produits ou vos services, il est inutile de charger toutes les images en même temps et de mettre des images avec des formats 4K pour des images qui seront affichées en 150px x 150px.

Dans l'exemple ci-dessus, vous pouvez très bien ne charger que 5 images sur X en chargeant uniquement que le N+1 et N-1, ce qui éviterait de charger vos 15 images alors que peut-être elles ne seront jamais affichées.

Lazy loading : la solution

L'objectif est de réfléchir en Lazy loading :

"Comment puis-je afficher mes images uniquement quand elles sont nécessaires ?"

Pour cela, il existe plusieurs solutions :

• Charger les images uniquement quand elles ne sont pas loin d'apparaître sur l'écran pour éviter un clignotement de chargement.
• Faire des carrousels lazy loading.
• Mettre des images de preview et si click pour agrandir, mettre une image de belle qualité.
• Le format wepb est plus léger de 25% à 34% que le jpg et 26% plus léger que le png.

La prochaine fois que vous mettez une image sur votre site, pensez à la taille de l'image, sa visibilité, et son format !