Comment charger des images de manière paresseuse (lazy loading)

Le lazy loading : charger les images uniquement quand elles sont visibles

Sur une page web typique, 60% du poids total vient des images. Si votre page contient 20 images et que l’utilisateur n’en voit que 3 sans scroller, vous gaspillez de la bande passante et ralentissez le chargement pour rien. Le lazy loading résout ce problème : les images ne se chargent que lorsqu’elles entrent dans le viewport (la zone visible de l’écran). Au Sénégal, où les connexions mobiles sont souvent limitées, cette technique peut réduire le temps de chargement initial de 50% ou plus.

Méthode 1 : l’attribut loading= »lazy » (la plus simple)

Depuis 2020, tous les navigateurs modernes supportent le lazy loading natif avec un simple attribut HTML :

<!-- ✅ Lazy loading natif — rien d'autre à faire -->
<img src="photo-equipe.jpg" 
     alt="Notre équipe à Dakar" 
     width="800" 
     height="450" 
     loading="lazy">

<!-- ❌ Ne PAS mettre loading="lazy" sur les images au-dessus de la ligne de flottaison -->
<img src="hero-banner.jpg" 
     alt="Bannière principale" 
     width="1200" 
     height="600" 
     loading="eager">  <!-- ou simplement omettre l'attribut -->

Règles :

• Ajoutez loading="lazy" à toutes les images SAUF celles visibles immédiatement (hero, logo, images au-dessus du premier écran)
• Spécifiez TOUJOURS width et height — cela évite le « layout shift » (le saut de page quand l’image se charge)
• Supporté par 95%+ des navigateurs en 2026

Méthode 2 : Intersection Observer (contrôle total)

Pour un contrôle avancé (effet de fade-in, placeholder, etc.), utilisez l’API Intersection Observer :

<!-- HTML : src contient un placeholder, data-src contient la vraie image -->
<img class="lazy" 
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect fill='%23f0f0f0' width='800' height='450'/%3E%3C/svg%3E"
     data-src="photo-equipe.jpg" 
     alt="Notre équipe"
     width="800" 
     height="450">

// JavaScript
const lazyImages = document.querySelectorAll('img.lazy');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;           // Charger la vraie image
      img.classList.add('loaded');           // Ajouter la classe pour l'animation
      img.classList.remove('lazy');
      observer.unobserve(img);              // Arrêter d'observer cette image
    }
  });
}, {
  rootMargin: '200px'  // Commencer le chargement 200px avant que l'image soit visible
});

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

/* CSS : effet de fade-in */
img.lazy {
  opacity: 0;
  transition: opacity 0.5s ease;
}

img.loaded {
  opacity: 1;
}

rootMargin: '200px' commence le chargement 200px avant que l’image n’entre dans le viewport. L’utilisateur ne voit jamais un espace vide car l’image est déjà chargée quand il scrolle jusqu’à elle.

Lazy loading des images de fond CSS

L’attribut loading="lazy" ne fonctionne que sur les balises <img>. Pour les images de fond CSS, utilisez Intersection Observer :

<div class="hero-section lazy-bg" data-bg="hero-background.jpg">
  <h1>Bienvenue</h1>
</div>

const lazyBgs = document.querySelectorAll('.lazy-bg');

const bgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.backgroundImage = 'url(' + entry.target.dataset.bg + ')';
      bgObserver.unobserve(entry.target);
    }
  });
});

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

Images responsive avec srcset et lazy loading

Combinez le lazy loading avec srcset pour servir la taille d’image adaptée à l’écran :

<img srcset="photo-400w.jpg 400w,
             photo-800w.jpg 800w,
             photo-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     src="photo-800w.jpg"
     alt="Description de la photo"
     loading="lazy"
     width="800"
     height="450">

Le navigateur choisit automatiquement la taille optimale. Sur un téléphone à Dakar en 3G, il charge la version 400px (30 Ko) au lieu de la version 1200px (200 Ko).

Le format WebP : 30% plus léger que JPEG

Utilisez la balise <picture> pour servir du WebP aux navigateurs compatibles et du JPEG comme fallback :

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" loading="lazy" width="800" height="450">
</picture>

Convertissez vos images en WebP avec Squoosh (en ligne, gratuit) ou en ligne de commande avec cwebp photo.jpg -o photo.webp -q 80.

Mesurer l’impact du lazy loading

1. Ouvrez DevTools → Network → filtrez par « Img »
2. Rechargez la page (Ctrl+Shift+R) et notez le nombre d’images chargées
3. Scrollez progressivement et observez les nouvelles images qui se chargent
4. Comparez le temps de chargement initial avec et sans lazy loading
5. Testez avec PageSpeed Insights pour voir l’impact sur les Core Web Vitals

Exercice

Créez une page galerie avec 20 images (utilisez picsum.photos pour des images de test) :

1. Appliquez loading="lazy" à toutes les images sauf les 3 premières
2. Ajoutez un effet de fade-in avec Intersection Observer
3. Utilisez srcset pour 3 tailles différentes
4. Mesurez la différence de poids dans l’onglet Network