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

Addy Osmani
Houssein Djirdeh
Mathias Bynens
Barry Pollard

Navigateurs pris en charge

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 15.4.

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é:

Les images chargées de manière différée sont chargées à mesure que l'utilisateur fait défiler la page.

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 percentile, 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:

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 différé, 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, qui est identique à celui obtenu si vous n'incluez pas l'attribut. Cela 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 lorsqu'elle est hors écran, puis récupérée avec une priorité élevée lorsqu'elle est presque dans le viewport. Cette combinaison n'est pas vraiment nécessaire, car le navigateur chargerait probablement cette image en priorité de toute façon.

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:

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 seuils d'économie de données et de distance par rapport au viewport

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 modifié le seuil de 4000px à 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) :

Nouveaux seuils améliorés pour le préchargement paresseux des images, réduisant la distance par rapport au viewport pour les connexions rapides de 3 000 px à 1 250 px.
Comparaison des anciens et nouveaux seuils utilisés pour le préchargement paresseux au niveau du navigateur.

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

Les nouveaux seuils de distance par rapport au viewport dans Chrome chargent 90 ko d&#39;images, contre 70 ko avec LazySizes dans les mêmes conditions réseau.
Comparaison des seuils utilisés pour le préchargement paresseux dans Chrome et LazySizes.

Attribuer des attributs de dimension à 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 gênants, 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 consistant à définir des dimensions s'applique aux balises <img>, que vous les chargez de manière différée ou non, mais le chargement différé peut rendre cette pratique 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 différé 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 de l'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 Effets sur les performances d'un chargement différé excessif.

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 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 é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é dans Chrome pour Android et que l'attribut loading n'était pas fourni ou était défini sur loading="auto". Toutefois, le mode Lite et loading="auto" ont été abandonnés, et il n'est pas prévu de fournir automatiquement le préchargement 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 les balises <img>.

L'utilisation de loading="lazy" peut empêcher le chargement d'images lorsqu'elles ne sont pas visibles, mais qu'elles se trouvent 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 de styles 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 paresseux horizontal pour comparer le comportement dans Chrome, Safari et Firefox.

Que se passe-t-il si j'utilise déjà une bibliothèque tierce ou un script pour charger les images de manière différée ?

É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.

L'une des raisons 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 paresseux des images au niveau du navigateur est bien pris en charge par tous les principaux navigateurs et est recommandé pour la plupart des cas d'utilisation, afin d'éviter d'avoir à dépendre de 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étecter si un navigateur est compatible avec la fonctionnalité:

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

Par exemple, lazysizes est une bibliothèque de chargement différé JavaScript populaire. 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. Voici comment cela fonctionne:

  • Remplacez <img src> par <img data-src> pour éviter une charge anticipée dans les navigateurs non compatibles. Si l'attribut loading est compatible, remplacez data-src par src.
  • Si loading n'est pas compatible, chargez un remplacement à partir de lazysizes et lancez-le, en utilisant la classe lazyload pour indiquer les images à charger de manière différée:
<!-- 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 ?

Navigateurs pris en charge

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 121.
  • Safari: 16.4.

<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 lazy-load les iFrames hors écran.

Quel est l'impact du chargement paresseux au niveau du navigateur sur les annonces d'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 les iframes se chargent immédiatement lorsque la page est imprimée. 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 le chargement différé des images peut vous aider à 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.