⚡ Optimisation web

Lazy loading des images : le guide complet 2026

⏱ 5 min de lecture 📅 Mis à jour mars 2026

Le lazy loading (chargement différé) est une technique qui consiste à ne charger les images que lorsqu'elles sont sur le point d'entrer dans le viewport de l'utilisateur. Sur une page longue contenant 20 images, un visiteur qui ne scroll pas n'a aucune raison de télécharger les 15 images situées en bas de page. Le lazy loading élimine ce gaspillage.

Qu'est-ce que le lazy loading ?

Par défaut, un navigateur charge toutes les images d'une page dès qu'il analyse le HTML, qu'elles soient visibles ou non. C'est le comportement eager (empressé). Le lazy loading inverse ce comportement : les images sont chargées à la demande, juste avant d'être affichées.

Les bénéfices sont immédiats :

Réduction du volume de données téléchargées lors du chargement initial
Amélioration du Time to Interactive : moins de ressources à charger = page interactive plus tôt
Économies de bande passante pour les utilisateurs mobiles et votre serveur
Meilleur score Lighthouse sur les métriques de performance

L'attribut HTML natif `loading="lazy"`

Depuis Chrome 76 (2019), Firefox 75 et Edge 79, le navigateur supporte nativement le lazy loading via l'attribut loading. Son utilisation est triviale :

<img
  src="photo-produit.webp"
  alt="Chaussure de running modèle X200"
  loading="lazy"
  width="600"
  height="400">

Trois valeurs sont disponibles :

lazy : chargement différé, l'image se charge quand elle approche du viewport
eager : comportement par défaut, chargement immédiat
auto : laisse le navigateur décider (généralement équivalent à eager)

Bonne pratique : Ajoutez systématiquement loading="lazy" à toutes vos images below-the-fold. C'est une modification d'une ligne, sans dépendance JavaScript, et le gain est immédiat.

Above-the-fold : l'exception critique

Le lazy loading ne doit jamais être appliqué aux images situées above-the-fold, c'est-à-dire visibles dès le chargement de la page, sans scroll. Cela inclut :

L'image hero en haut de page
Le logo si c'est une image
Les premières illustrations d'un article
Tout élément visuel immédiatement visible

Appliquer loading="lazy" à ces images retarde leur chargement, ce qui dégrade directement le Largest Contentful Paint (LCP), la métrique Core Web Vitals la plus importante pour les images. L'image hero est très souvent l'élément LCP d'une page.

Erreur critique à éviter : Mettre loading="lazy" sur l'image hero. Certains frameworks et plugins CMS l'appliquent à toutes les images par défaut, vérifiez et excluez explicitement les images above-the-fold.

L'Intersection Observer API

Avant la standardisation de loading="lazy", les développeurs implémentaient le lazy loading manuellement via l'Intersection Observer API. Cette approche reste utile pour des cas avancés : arrière-plans CSS, images dans des iframes, ou contrôle fin de la marge de déclenchement.

// Sélectionner toutes les images avec data-src
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px' // Commence à charger 200px avant l'entrée dans le viewport
});

images.forEach(img => observer.observe(img));

En HTML, les images non-chargées utilisent un attribut data-src à la place de src :

<img
  data-src="photo.webp"
  src="placeholder-tiny.webp"
  alt="Description"
  width="800"
  height="500">

À noter : L'attribut natif loading="lazy" est préférable dans la grande majorité des cas. L'Intersection Observer API n'est à utiliser que pour des besoins non couverts par l'attribut natif.

Impact sur le LCP

Le lazy loading a un effet direct sur le LCP. Bien utilisé, il améliore les performances globales de la page en réduisant les ressources chargées au démarrage. Mal utilisé (sur l'image LCP), il le dégrade significativement.

Voici les règles à suivre :

Image LCP : fetchpriority="high", sans loading="lazy", avec <link rel="preload"> dans le <head>
Images 1 à 3 (above-the-fold) : chargement eager (défaut)
Toutes les autres images : loading="lazy"

Support navigateurs en 2026

L'attribut loading="lazy" est supporté par tous les navigateurs modernes :

Navigateur	Support depuis	Version minimale
Chrome / Edge	Juillet 2019	76+
Firefox	Avril 2020	75+
Safari	Septembre 2021	15.4+
Samsung Internet	2020	12+

La couverture mondiale dépasse 95 % en 2026. Les quelques navigateurs non supportés chargent simplement toutes les images (comportement par défaut), sans erreur.

Exemples CSS : lazy loading des arrière-plans

L'attribut loading="lazy" ne s'applique qu'aux balises <img>. Pour les images de fond CSS, il faut utiliser l'Intersection Observer API ou une classe CSS conditionnelle :

/* L'image de fond ne se charge pas tant que .loaded n'est pas ajouté */
.hero-bg {
  background-image: none;
}

.hero-bg.loaded {
  background-image: url('background.webp');
}

// Ajouter la classe .loaded quand l'élément entre dans le viewport
const bgElements = document.querySelectorAll('.hero-bg');

const bgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('loaded');
      bgObserver.unobserve(entry.target);
    }
  });
});

bgElements.forEach(el => bgObserver.observe(el));

Recommandation : Évitez les images de fond CSS pour les contenus importants. Préférez les balises <img> qui bénéficient du lazy loading natif, sont indexées par Google et peuvent recevoir un attribut alt.

Essayez les outils imgpact

Avant de lazy-loader, assurez-vous que vos images sont déjà optimisées. Compressez et convertissez en WebP en un clic.

Optimiser mes images