Chargement différé des images au niveau du navigateur pour le Web

Vous pouvez utiliser l'attribut loading pour charger des images en différé sans avoir à écrire de code de chargement différé personnalisé ni à utiliser une bibliothèque JavaScript distincte. Voici une démonstration de cette fonctionnalité:

Cette page explique en détail comment implémenter le chargement différé dans le navigateur.

Pourquoi le chargement différé au niveau du navigateur ?

Selon l'archive HTTP, les images sont le type d'élément le plus demandé pour la plupart des sites Web. Elles utilisent généralement plus de bande passante que toute autre ressource. Au 90e centile, les sites envoient plus de 5 Mo d'images sur ordinateur et sur mobile.

Auparavant, il existait deux façons de différer le chargement des images hors écran:

• Utiliser l'API Intersection Observer
• Avec les gestionnaires d'événements scroll, resize ou orientationchange

Ces deux options peuvent permettre aux développeurs d'inclure un comportement de chargement différé, et de nombreux développeurs ont créé des bibliothèques tierces pour fournir des abstractions encore plus faciles à utiliser.

Cependant, le chargement différé étant directement pris en charge par le navigateur, il n'est pas nécessaire d'avoir une bibliothèque externe. Le chargement différé au niveau du navigateur garantit également que le chargement des images fonctionne toujours, même si le client désactive JavaScript. Notez toutefois que le chargement n'est différé que lorsque JavaScript est activé.

Attribut loading

Chrome charge les images avec des priorités différentes en fonction de leur emplacement par rapport à la fenêtre d'affichage de l'appareil. Les images situées sous la fenêtre d'affichage sont chargées avec une priorité inférieure, mais elles sont tout de même extraites lors du chargement de la page.

Vous pouvez utiliser l'attribut loading pour différer complètement le chargement des images hors écran:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Voici les valeurs acceptées pour l'attribut loading:

• lazy: reporte le chargement de la ressource jusqu'à ce qu'elle atteigne une distance calculée par rapport à la fenêtre d'affichage.
• eager: comportement de chargement par défaut du navigateur, qui revient à ne pas inclure l'attribut et qui signifie que l'image est chargée quel que soit son emplacement sur la page. Il s'agit de la valeur par défaut, mais il peut être utile de la définir explicitement si vos outils ajoutent automatiquement loading="lazy" en l'absence de valeur explicite, ou si votre lint se plaint si elle n'est pas explicitement définie.

Relation entre l'attribut loading et la priorité de récupération

La valeur eager est une instruction permettant de charger l'image comme d'habitude, sans retarder davantage le chargement si l'image se trouve hors de l'écran. Elle ne charge pas l'image plus rapidement qu'une autre image sans attribut loading.

Si vous souhaitez augmenter la priorité de récupération d'une image importante (par exemple, l'image LCP), utilisez Fetch Priority (Priorité de récupération) avec fetchpriority="high".

Une image avec loading="lazy" et fetchpriority="high" est toujours retardée tant qu'elle n'est pas à l'écran, puis récupérée avec une priorité élevée lorsqu'elle se trouve presque dans la fenêtre d'affichage. Cette combinaison n'est pas vraiment nécessaire, car le navigateur risque de toute façon de charger cette image avec une priorité élevée.

Seuils de distance par rapport à la fenêtre d'affichage

Toutes les images qui sont immédiatement visibles sans défilement se chargent normalement. Les images bien en dessous de la fenêtre d'affichage de l'appareil ne sont récupérées que lorsque l'utilisateur fait défiler la page à proximité.

L'implémentation du chargement différé dans Chromium vise à s'assurer que les images hors écran sont chargées suffisamment tôt pour que leur chargement se termine au moment où l'utilisateur y accède en les récupérant bien avant qu'elles ne soient visibles dans la fenêtre d'affichage.

Le seuil de distance varie en fonction des facteurs suivants:

• Type de ressource d'image récupérée
• Type de connexion effectif

Vous trouverez les valeurs par défaut des différents types de connexion efficaces dans la source Chromium. Vous pouvez tester ces différents seuils en régulant le réseau dans les outils de développement.

Amélioration des seuils d'économies de données et de distance par rapport à la fenêtre d'affichage

En juillet 2020, Chrome a apporté d'importantes améliorations pour aligner les seuils de distance de chargement différé des images par rapport à la fenêtre d'affichage afin de mieux répondre aux attentes des développeurs.

Pour les connexions rapides (4G), nous avons réduit les seuils de distance entre la fenêtre d'affichage de Chrome de 3000px à 1250px. Pour les connexions plus lentes (3G ou moins), nous avons fait passer le seuil de 4000px à 2500px. Ce changement a deux objectifs:

• <img loading=lazy> se comporte plus près de l'expérience offerte par les bibliothèques de chargement différé JavaScript.
• Avec les nouveaux seuils de distance par rapport à la fenêtre d'affichage, les images seront probablement chargées au moment où l'utilisateur fait défiler la page jusqu'à elles.

Vous trouverez ci-dessous une comparaison entre les anciens et les nouveaux seuils de distance par rapport à la fenêtre d'affichage pour l'une de nos démonstrations sur une connexion rapide (4G) :

Anciens seuils et nouveaux seuils:

et les nouveaux seuils par rapport à LazySizes (une bibliothèque JavaScript à chargement différé populaire):

Attribuer des attributs de dimensions à vos images

Lorsque le navigateur charge une image, il n'en connaît pas immédiatement les dimensions, sauf si elles sont explicitement spécifiées. Pour laisser le navigateur réserver suffisamment d'espace sur une page pour les images et éviter des changements de mise en page perturbateurs, nous vous recommandons d'ajouter les attributs width et height à toutes les balises <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Vous pouvez également spécifier leurs valeurs directement dans un style intégré:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

La bonne pratique qui consiste à définir des dimensions s'applique aux balises <img>, qu'il s'agisse d'un chargement différé, mais le chargement différé peut rendre cet aspect plus important.

Le chargement différé dans Chromium est mis en œuvre de sorte que les images aient plus de chances d'être chargées dès qu'elles sont visibles. Toutefois, il est possible qu'elles ne se chargent pas au bon moment. Dans ce cas, le fait de ne pas spécifier width et height sur vos images augmente leur impact sur Cumulative Layout Shift. Si vous ne pouvez pas spécifier les dimensions de vos images, leur chargement différé permet d'économiser les ressources réseau en cas de changement de mise en page.

Dans la plupart des cas, le chargement des images est toujours différé si vous ne spécifiez pas de dimensions. Toutefois, il existe quelques cas particuliers que vous devez connaître. Si width et height ne sont pas spécifiés, les dimensions de l'image sont de 0 × 0 pixel par défaut. Si vous disposez d'une galerie d'images, le navigateur peut décider qu'elles tiennent toutes dans la fenêtre d'affichage au début, car chaque image n'occupe pas d'espace et aucune image n'est déplacée hors de l'écran. Dans ce cas, le navigateur décide de tout charger, ce qui ralentit le chargement de la page.

Pour découvrir comment loading fonctionne avec un grand nombre d'images, reportez-vous à cette démonstration.

Vous pouvez également effectuer le chargement différé des images que vous avez définies à l'aide de l'élément <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Bien que le navigateur décide quelle image charger à partir de n'importe quel élément <source>, il vous suffit d'ajouter loading à l'élément <img> de remplacement.

Toujours charger rapidement les images visibles dans la première fenêtre d'affichage

Pour les images visibles lorsque l'utilisateur charge la page pour la première fois, et en particulier pour les images LCP, utilisez le chargement eager par défaut du navigateur afin qu'elles soient disponibles immédiatement. Pour en savoir plus, consultez la section Effets sur les performances d'un chargement différé trop important.

N'utilisez loading=lazy que pour les images qui se trouvent en dehors de la fenêtre d'affichage initiale. Le navigateur ne peut pas charger une image de manière différée tant qu'il ne sait pas où elle doit se trouver sur la page, ce qui ralentit son chargement.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Dégradation progressive

Les navigateurs qui ne sont pas compatibles avec l'attribut loading l'ignorent. Ils ne bénéficient pas des avantages du chargement différé, mais son inclusion n'a aucun impact négatif.

Questions fréquentes

Puis-je effectuer le chargement différé automatique des images dans Chrome ?

Auparavant, Chromium effectuait automatiquement le chargement différé des images qui pouvaient être différées si le mode simplifié était activé sur Chrome pour Android et que l'attribut loading n'était pas fourni ou était défini sur loading="auto". Toutefois, le mode simplifié et loading="auto" sont obsolètes, et il n'est pas prévu de fournir automatiquement le chargement différé d'images dans Chrome.

Puis-je modifier la proximité d'une image par rapport à la fenêtre d'affichage pour qu'elle se charge ?

Ces valeurs sont codées en dur et ne peuvent pas être modifiées via l'API. Toutefois, ils pourraient changer à l'avenir, car les navigateurs expérimentent différentes distances de seuil et variables.

Les images de fond CSS peuvent-elles utiliser l'attribut loading ?

Non, vous ne pouvez l'utiliser qu'avec des balises <img>.

loading peut-il fonctionner avec des images de la fenêtre d'affichage qui ne sont pas immédiatement visibles ?

L'utilisation de loading="lazy" peut empêcher le chargement d'images non visibles, mais situées dans la distance calculée. Ces images peuvent se trouver derrière un carrousel ou être masquées par du CSS pour certaines tailles d'écran. Par exemple, Chrome, Safari et Firefox ne chargent pas les images à l'aide du style display: none;, que ce soit sur l'élément image ou sur un élément parent. Toutefois, d'autres techniques de masquage d'image, telles que le style opacity:0, entraînent toujours le chargement de l'image par le navigateur. Testez toujours votre implémentation minutieusement pour vous assurer qu'elle fonctionne comme prévu.

Chrome 121 a modifié le comportement du défilement horizontal des images à défilement horizontal, comme les carrousels. Ils utilisent désormais les mêmes seuils que le défilement vertical. Cela signifie que pour le cas d'utilisation du carrousel, les images seront chargées avant d'être visibles dans la fenêtre d'affichage. Cela signifie que le chargement de l'image a moins de chances d'être perceptible par l'utilisateur, mais au prix d'un plus grand nombre de téléchargements. Utilisez la démonstration du chargement différé horizontal pour comparer le comportement dans Chrome, dans Safari et dans Firefox.

Que se passe-t-il si j'utilise déjà une bibliothèque tierce ou un script pour charger des images en différé ?

Les navigateurs récents étant entièrement compatibles avec le chargement différé, vous n'avez probablement pas besoin d'une bibliothèque ou d'un script tiers pour charger les images en différé.

L'une des raisons de continuer à utiliser une bibliothèque tierce en plus de loading="lazy" est de fournir un polyfill pour les navigateurs qui ne sont pas compatibles avec l'attribut ou de mieux contrôler le moment où le chargement différé est déclenché.

Comment gérer les navigateurs qui ne sont pas compatibles avec le chargement différé ? {browsers-dont-support}

Créez un polyfill ou utilisez une bibliothèque tierce pour charger les images en différé sur votre site. Vous pouvez utiliser la propriété loading pour détecter si un navigateur est compatible avec cette fonctionnalité:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Par exemple, lazysizes est une bibliothèque JavaScript populaire à chargement différé. Vous ne pouvez détecter la prise en charge de l'attribut loading pour charger des tailles différées en tant que bibliothèque de remplacement que lorsque loading n'est pas compatible. Cela fonctionne comme suit:

• Remplacez <img src> par <img data-src> pour éviter une charge hâtive dans les navigateurs non compatibles. Si l'attribut loading est accepté, remplacez data-src par src.
• Si loading n'est pas compatible, chargez une création de remplacement à partir de tailles différées et lancez-la en utilisant la classe lazyload pour indiquer les images à charger en différé:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Voici une démonstration de ce modèle. Essayez dans une ancienne version de navigateur pour voir la création de remplacement en action.

Le chargement différé pour les iFrames est-il également compatible avec les navigateurs ?

<iframe loading=lazy> a également été standardisé. Cela vous permet de charger des iFrames de manière différée à l'aide de l'attribut loading. Pour en savoir plus, consultez Il est temps de charger en différé les iFrames hors écran.

Comment le chargement différé au niveau du navigateur affecte-t-il les publicités sur une page Web ?

Toutes les annonces présentées aux utilisateurs sous forme d'images ou de cadres iFrame se chargent de manière différée, comme n'importe quelle autre image ou iFrame.

Comment les images sont-elles traitées lorsqu'une page Web est imprimée ?

Toutes les images et les cadres iFrame se chargent immédiatement à l'impression de la page. Pour en savoir plus, consultez le problème 875403.

Lighthouse reconnaît-il le chargement différé au niveau du navigateur ?

Lighthouse 6.0 et facteur supérieur dans les approches de chargement différé des images hors écran qui peuvent utiliser différents seuils, ce qui leur permet de réussir l'audit Différer les images hors écran.

Utilisez le chargement différé des images pour améliorer les performances

La compatibilité du navigateur avec les images à chargement différé peut vous permettre d'améliorer considérablement les performances de vos pages.

Avez-vous remarqué un comportement inhabituel lorsque cette fonctionnalité est activée dans Chrome ? Signalez un bug.