C'est quoi le lazy loading des images ?

Quand une page web contient de nombreuses images, charger toutes les photos dès l'ouverture de la page alourdit inutilement le temps de chargement initial. Le lazy loading — ou chargement différé — est une technique qui permet de ne charger chaque image que lorsque l'utilisateur est sur le point de la voir. Simple à mettre en place, elle améliore significativement les performances d'un site et l'expérience utilisateur.

Définition du lazy loading

Le lazy loading (littéralement « chargement paresseux ») consiste à retarder le chargement des ressources non immédiatement visibles à l'écran. Appliqué aux images, cela signifie que seules les images situées dans la zone visible au moment du chargement de la page (le viewport) sont téléchargées immédiatement. Les autres images se chargent au fur et à mesure que l'utilisateur fait défiler la page.

Sans lazy loading, le navigateur télécharge l'intégralité des images de la page dès son ouverture — même celles situées tout en bas, que l'utilisateur ne verra peut-être jamais.

Comment fonctionne le lazy loading ?

Il existe deux approches principales pour implémenter le lazy loading des images :

1. L'attribut HTML natif loading="lazy"

Depuis 2019, les navigateurs modernes supportent nativement le lazy loading via un simple attribut HTML :

<img src="photo.jpg" alt="Description" loading="lazy">

Le navigateur se charge automatiquement de décider quand charger l'image selon la position du scroll de l'utilisateur. C'est la méthode recommandée aujourd'hui : aucune bibliothèque JavaScript n'est nécessaire.

2. L'Intersection Observer API (JavaScript)

Avant la standardisation de l'attribut natif, les développeurs utilisaient l'Intersection Observer API pour détecter quand une image entre dans le viewport et déclencher son chargement à ce moment-là. Cette approche reste utile pour des comportements plus avancés ou des animations à l'entrée des images.

Quels sont les avantages du lazy loading ?

Performances et temps de chargement

En réduisant le nombre d'images chargées au démarrage, le lazy loading diminue le poids initial de la page et accélère son affichage. Les métriques de performance comme le Largest Contentful Paint (LCP) et le Time to Interactive (TTI) s'en trouvent améliorées.

Économie de bande passante

Les images situées en bas de page ne sont téléchargées que si l'utilisateur les atteint réellement. Sur une longue page avec de nombreux visuels, cela peut représenter une économie significative — surtout pour les visiteurs sur mobile ou connexion lente.

SEO et Core Web Vitals

Google prend en compte les Core Web Vitals dans son classement. Un meilleur LCP, directement influencé par le chargement des images, peut avoir un impact positif sur le positionnement dans les résultats de recherche.

Lazy loading : ce qu'il ne faut pas faire

Le lazy loading n'est pas adapté à toutes les images. Deux erreurs fréquentes sont à éviter :

• Ne jamais appliquer loading="lazy" aux images hero ou au-dessus de la ligne de flottaison — ces images sont visibles dès le chargement, retarder leur affichage dégraderait le LCP et l'expérience utilisateur.
• Ne pas omettre l'attribut width et height — sans dimensions définies, le navigateur ne peut pas réserver l'espace pour l'image avant son chargement, ce qui provoque des décalages de mise en page (layout shifts) néfastes au Cumulative Layout Shift (CLS).

Bon à savoir : pour les images situées immédiatement visibles au chargement (bannière, hero image, logo), utilisez au contraire l'attribut loading="eager" ou omettez simplement l'attribut — c'est le comportement par défaut du navigateur.

Compatibilité navigateurs

Lazy loading et hébergement d'images

Lorsque vous utilisez un service d'hébergement d'images pour stocker et distribuer vos visuels, pensez à toujours intégrer l'attribut loading="lazy" sur les images qui ne sont pas immédiatement visibles. La combinaison d'un hébergement performant (CDN, compression automatique) et du lazy loading maximise la rapidité d'affichage de vos pages.

Bon à savoir : un service d'hébergement d'images de qualité fournit des URLs directes stables pour chaque image, ce qui facilite l'intégration du lazy loading : il vous suffit d'ajouter loading="lazy" à votre balise <img> sans modifier l'URL source.