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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Vous pouvez utiliser l'attribut loading pour charger les images de manière différée 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éments le plus demandé sur la plupart des sites Web. Elles occupent 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
• Utilisation des gestionnaires d'événements scroll, resize ou orientationchange

Les deux options permettent aux développeurs d'inclure un comportement de chargement paresseux. De nombreux développeurs ont créé des bibliothèques tierces pour fournir des abstractions encore plus faciles à utiliser.

Toutefois, comme le navigateur est compatible avec le chargement paresseux, aucune bibliothèque externe n'est nécessaire. 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 selon différentes priorités en fonction de leur emplacement par rapport au viewport de l'appareil. Les images situées en dessous de la fenêtre d'affichage sont chargées avec une priorité inférieure, mais elles sont toujours 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 : différez 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, identique à l'exclusion de l'attribut, 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 votre outil ajoute automatiquement loading="lazy" en l'absence de valeur explicite ou si votre analyseur lint se plaint si elle n'est pas définie explicitement.

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

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

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

Une image avec loading="lazy" et fetchpriority="high" est toujours retardée tant qu'elle est hors écran, puis extraite 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 chargerait de toute façon cette image avec une priorité élevée.

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

Toutes les images visibles immédiatement sans défilement se chargent normalement. Les images situées bien en dessous du champ de vision 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é de Chromium vise à s'assurer que les images hors écran sont chargées suffisamment tôt pour qu'elles soient terminées au moment où l'utilisateur les fait défiler. Pour ce faire, elles sont récupérées bien avant qu'elles ne deviennent visibles dans la fenêtre d'affichage.

Le seuil de distance varie en fonction des facteurs suivants:

• Type de ressource image récupérée
• Type de connexion compatible

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 limitant le débit du réseau dans DevTools.

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

En juillet 2020, Chrome a apporté des améliorations significatives pour aligner les seuils de distance du chargement différé des images par rapport au viewport afin de mieux répondre aux attentes des développeurs.

Sur les connexions rapides (4G), nous avons réduit le seuil de distance par rapport au viewport de Chrome de 3000px à 1250px. Sur les connexions plus lentes (3G ou moins), nous avons remplacé le seuil de 4000px par 2500px. Cette modification a deux objectifs :

• <img loading=lazy> se rapproche de l'expérience proposée par les bibliothèques de chargement différé JavaScript.
• Les nouveaux seuils de distance par rapport au viewport signifient toujours que les images seront probablement chargées au moment où l'utilisateur les a fait défiler.

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

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

Attribuer des attributs aux dimensions de vos images

Lorsque le navigateur charge une image, il ne connaît pas immédiatement ses dimensions, sauf si elles sont spécifiées explicitement. Pour permettre au navigateur de réserver suffisamment d'espace sur une page pour les images et éviter les déplacements de mise en page perturbateurs, nous vous recommandons d'ajouter les attributs width et height à tous 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 tags <img>, que vous utilisiez le chargement différé ou non. Toutefois, le chargement différé peut rendre cette opération plus importante.

Le chargement paresseux dans Chromium est implémenté de manière à ce que les images soient plus susceptibles d'être chargées dès qu'elles sont visibles, mais il est toujours possible qu'elles ne se chargent pas au bon moment. Dans ce cas, ne spécifier ni width ni height sur vos images augmente leur impact sur le décalage de mise en page cumulé. Si vous ne pouvez pas spécifier les dimensions de vos images, le chargement paresseux peut économiser des ressources réseau, mais au risque d'augmenter les déplacements de mise en page.

Dans la plupart des cas, les images sont toujours chargées de manière différée si vous ne spécifiez pas de dimensions, mais il existe quelques cas particuliers à connaître. Sans width et height spécifiés, les dimensions de l'image sont définies par défaut sur 0 x 0 pixels. Si vous avez une galerie d'images, le navigateur peut décider qu'elles tiennent toutes dans le viewport au début, car chaque image ne prend pas de place et aucune image n'est poussée en dehors de l'écran. Dans ce cas, le navigateur décide de tout charger, ce qui ralentit le chargement de la page.

Pour voir comment loading fonctionne avec un grand nombre d'images, consultez cette démo.

Vous pouvez également charger de manière différée les 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 l'un des éléments <source>, il vous suffit d'ajouter loading à l'élément <img> de remplacement.

Toujours charger de manière anticipée 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 rapide par défaut du navigateur afin qu'elles soient disponibles immédiatement. Pour en savoir plus, consultez la section Effets de performances d'un chargement différé.

N'utilisez loading=lazy que pour les images situées 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 le ralentit.

<!-- 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 élégante

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

Questions fréquentes

Voici quelques questions fréquentes sur le préchargement paresseux au niveau du navigateur.

Puis-je charger automatiquement les images en mode lazy-loading dans Chrome ?

Auparavant, Chromium chargeait automatiquement toutes les images adaptées à un chargement différé si le mode Lite é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 nous ne prévoyons pas de fournir le chargement différé automatique des images dans Chrome.

Puis-je modifier la proximité d'une image avec la fenêtre d'affichage avant son chargement ?

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

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 dans le viewport qui ne sont pas immédiatement visibles ?

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

Chrome 121 a modifié le comportement 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 sont chargées avant d'être visibles dans le viewport. Cela signifie que le chargement des images est moins susceptible d'être remarqué par l'utilisateur, mais au prix de plus de téléchargements. Utilisez la démonstration du chargement différé horizontal pour comparer le comportement dans Chrome par rapport à Safari et 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é ?

Étant donné que le chargement différé est entièrement intégré aux navigateurs modernes, vous n'avez probablement pas besoin d'une bibliothèque ou d'un script tiers pour charger les images de manière différée.

Une raison de continuer à utiliser une bibliothèque tierce avec loading="lazy" est de fournir un polyfill pour les navigateurs qui ne prennent pas en charge l'attribut, ou de mieux contrôler le moment où le chargement paresseux est déclenché.

Comment gérer les navigateurs qui ne sont pas compatibles avec le chargement différé ?

Le chargement différé des images au niveau du navigateur est bien compatible avec tous les principaux navigateurs. Il est recommandé dans la plupart des cas d'utilisation, afin d'éliminer la nécessité de dépendances supplémentaires sur JavaScript.

Toutefois, si vous devez prendre en charge davantage de navigateurs ou si vous souhaitez mieux contrôler les seuils de préchargement, vous pouvez utiliser une bibliothèque tierce pour précharger les images sur votre site.

Vous pouvez utiliser la propriété loading pour déterminer 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 de chargement différé. Vous ne pouvez détecter la compatibilité avec l'attribut loading pour charger lazysizes en tant que bibliothèque de secours que lorsque loading n'est pas compatible. Le fonctionnement est le suivant:

• Remplacez <img src> par <img data-src> pour éviter une charge excessive dans les navigateurs non compatibles. Si l'attribut loading est compatible, remplacez data-src par src.
• Si loading n'est pas compatible, chargez une création de remplacement à partir des 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-le dans un ancien navigateur pour voir le remplacement en action.

Le chargement paresseux des iFrames est-il également compatible avec les navigateurs ?

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

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

Toutes les annonces affichées à l'utilisateur sous forme d'images ou d'iFrames sont chargées 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 tous 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 les versions ultérieures prennent en compte 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.

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.

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