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 du code à chargement différé personnalisé ou utiliser une bibliothèque JavaScript distincte. Voici un démonstration de la fonctionnalité:

Cette page décrit en détail comment mettre en œuvre le chargement différé dans le navigateur.

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

Selon HTTP Archive, Les images constituent le type d'asset le plus demandé sur la plupart des sites Web. utilisent plus de bande passante que toute autre ressource. Au 90e centile, les sites envoient plus de 5 Mo d'images sur les ordinateurs et les mobiles.

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

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

Chacune de ces options permet aux développeurs d'inclure un comportement de chargement différé. les développeurs ont créé des bibliothèques tierces pour fournir des abstractions encore plus facile à utiliser.

Le chargement différé étant directement pris en charge par le navigateur, aucune bibliothèque externe n'est nécessaire. Le chargement différé au niveau du navigateur garantit également que le chargement des images continue de fonctionner 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 à différentes priorités 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 un de priorité inférieure, mais elles sont toujours récupérées lors du chargement de la page.

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

<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, identique au comportement (attribut inclus) et signifie que l'image est chargée quel que soit l'endroit situées sur la page. Il s'agit de la valeur par défaut, mais il peut être utile de définir explicitement si vos outils ajoutent automatiquement loading="lazy" lorsqu'il n'y a valeur explicite, ou si votre lint signale qu'elle n'est pas définie explicitement.

Relation entre l'attribut loading et la priorité d'extraction

La valeur eager est une instruction permettant de charger l'image normalement, sans retarder davantage si l'image n'est pas à l'écran. L'image ne se charge pas plus vite qu'une autre image sans attribut loading.

Si vous souhaitez augmenter la priorité d'extraction d'une image importante (par exemple, l'image LCP), utilisez Fetch Priority (Extraire la priorité) avec fetchpriority="high"

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

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

Toutes les images immédiatement visibles sans défilement se chargent normalement. Images situées sous 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 tente de s'assurer que les images hors écran sont chargés suffisamment tôt pour qu'ils soient terminés au moment où l'utilisateur fait défiler en les récupérant bien avant qu'ils ne deviennent visibles dans la fenêtre d'affichage.

Le seuil de distance varie en fonction des facteurs suivants:

• Type de ressource d'image en cours de récupération
• Type de connexion effective

Vous trouverez les valeurs par défaut des différents types de connexions effectives dans la source Chromium. Vous pouvez tester ces différents seuils de limitation du réseau dans les outils de développement.

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é d'importantes améliorations afin d'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 le seuil de distance de la fenêtre d'affichage de Chrome de 3000px à 1250px, et pour les connexions plus lentes (3G ou moins), nous avons modifié le seuil de 4000px à 2500px. Cette modification a deux objectifs:

• <img loading=lazy> se comporte plus proches de l'expérience proposée par les bibliothèques à chargement différé JavaScript.
• Avec les nouveaux seuils de distance par rapport à la fenêtre d'affichage, les images seront probablement chargées lorsque l'utilisateur fera défiler la page jusqu'à elles.

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

Anciens seuils et nouveaux seuils:

et les nouveaux seuils par rapport à LazySizes (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 la à moins qu'elles ne soient spécifiées explicitement. Pour laisser le navigateur réserver suffisamment d'espace sur la page pour les images et évitez les décalages de mise en page perturbateurs ; nous vous recommandons d'ajouter les attributs width et height à tous les tags <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>, quels que soient si vous le faites en différé, mais le chargement différé peut le rendre plus important.

Le chargement différé dans Chromium est implémenté de manière à augmenter la probabilité que les images d'être chargés dès qu'elles sont visibles, mais il est possible que ils ne se chargent pas au bon moment. Dans ce cas, ne spécifiez pas width et height sur vos images augmente leur impact sur le décalage de mise en page cumulatif. Si vous ne pouvez pas définir vos images des dimensions spécifiques, leur chargement différé peut économiser ressources, car elles risquent d'entraîner des décalages de mise en page accrus.

Dans la plupart des cas, les images se chargent en différé si vous ne spécifiez pas de dimensions, mais il y a quelques cas limites que vous devez connaître. Sans width ni height est spécifiée, les dimensions de l'image sont définies par défaut sur 0 × 0 pixel. Si vous avez une galerie de images, le navigateur peut décider qu'elles tiennent toutes dans la fenêtre d'affichage car chaque image n'occupe pas d'espace et n'est pas repoussée à l'écran. Dans Dans ce cas, le navigateur décide de tout charger, ce qui rend le chargement de la page plus lentement.

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

Vous pouvez également charger en 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 depuis l'un des <source> il vous suffit d'ajouter loading à l'élément de remplacement <img>.

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

Pour les images qui s'affichent lorsque l'utilisateur charge la page pour la première fois, et en particulier pour les images LCP, utilisez le chargement hétérogène 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 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 entraîne un chargement plus lent.

<!-- 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 prennent pas en charge l'attribut loading l'ignorent. Ils n'obtiennent pas les avantages du chargement différé, mais il n'y a aucun impact négatif.

Questions fréquentes

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

Auparavant, Chromium effectuait automatiquement le chargement différé des images adaptées reporté en mode simplifié était activé sur Chrome pour Android alors que l'attribut loading n'était pas fourni ou défini sur loading="auto". Toutefois, Le mode simplifié et loading="auto" sont obsolètes Nous ne prévoyons pas de proposer un chargement différé automatique des images dans Chrome.

Puis-je modifier la proximité d'une image par rapport à 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. Cependant, ils est susceptible de changer à l'avenir, car les navigateurs testent des seuils différents les distances et les variables.

Les images d'arrière-plan CSS peuvent-elles utiliser l'attribut loading ?

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

La fonction loading peut-elle 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 lorsqu'elles ne le sont pas sont visibles, mais se situent dans la distance calculée. Ces images peuvent se trouver derrière un carrousel ou être masquées par CSS pour certains écrans différentes. Par exemple, Chrome, Safari et Firefox ne chargent pas les images via Style display: none;, soit sur l'élément image, soit sur un parent . D'autres techniques de masquage d'images, comme opacity:0, par exemple d'un style, le navigateur continue à charger l'image. Testez toujours votre l’implémentation afin de s’assurer qu’elle fonctionne comme prévu.

Chrome 121 a modifié le comportement des images à défilement horizontal, comme les carrousels. Elles utilisent désormais les mêmes seuils que le défilement vertical. Cela signifie que dans le cas d'utilisation du carrousel, les images sont chargées avant d'être visibles dans la fenêtre d'affichage. Le chargement de l'image est donc moins susceptible d'être perceptible pour 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 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é ?

Les navigateurs récents étant totalement compatibles avec le chargement différé, ont besoin d'une bibliothèque ou d'un script tiers pour charger les images en différé.

Une raison de continuer à utiliser une bibliothèque tierce en plus de loading="lazy" est de fournir un polyfill pour les navigateurs qui n'acceptent pas cet attribut ; ou plus de contrôle sur le déclenchement du chargement différé.

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

Créez un polyfill ou utilisez une bibliothèque tierce pour charger des images de manière différée sur votre site. Vous pouvez utiliser la propriété loading pour détecter si un navigateur prend en charge 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. Vous pouvez détecter la prise en charge du loading pour charger des tailles différées en tant que bibliothèque de remplacement uniquement lorsque loading n'est pas compatibles. Le fonctionnement est le suivant:

• Remplacez <img src> par <img data-src> pour éviter un chargement excessif dans des navigateurs non compatibles. Si l'attribut loading est accepté, remplacez data-src. pour src.
• Si loading n'est pas compatible, chargez une création de remplacement à partir des tailles différées et lancez à l'aide de 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 ce modèle. Essayez dans un navigateur plus ancien pour voir la solution de secours en action.

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

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

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

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

Comment les images sont-elles traitées lors de l'impression d'une page Web ?

Toutes les images et tous les cadres iFrame se chargent immédiatement à l'impression de la page. Voir problème 875403 pour en savoir plus.

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

Lighthouse 6.0 ou version ultérieure pour le chargement différé des images hors écran qui peuvent utiliser différents seuils, en leur permettant de transmettre Audit Différer les images hors écran.

Chargement différé des images pour améliorer les performances

La compatibilité des navigateurs avec les images à chargement différé peut vous faciliter la tâche pour améliorer l'efficacité de vos pages des performances.

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