Lazy Loading für Bilder auf Browserebene für das Web

Addy Osmani
Houssein Djirdeh
Mathias Bynens
Barry Pollard

Browser Support

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

Mit dem Attribut loading können Sie Bilder per Lazy Loading laden, ohne benutzerdefinierten Lazy-Loading-Code schreiben oder eine separate JavaScript-Bibliothek verwenden zu müssen. Hier sehen Sie eine Demo der Funktion:

Per Lazy Loading geladene Bilder werden geladen, während der Nutzer auf der Seite scrollt.

Auf dieser Seite wird die Implementierung von Lazy Loading im Browser im Detail beschrieben.

Warum Lazy Loading auf Browserebene?

Laut dem HTTP Archive sind Bilder der am häufigsten angeforderte Asset-Typ für die meisten Websites und verbrauchen in der Regel mehr Bandbreite als jede andere Ressource. Im 90. Perzentil senden Websites über 5 MB Bilder auf Desktop- und Mobilgeräten.

Bisher gab es zwei Möglichkeiten, das Laden von Bildern außerhalb des sichtbaren Bereichs zu verzögern:

Mit beiden Optionen können Entwickler Lazy Loading-Verhalten einbinden. Viele Entwickler haben Drittanbieter-Bibliotheken erstellt, um Abstraktionen bereitzustellen, die noch einfacher zu verwenden sind.

Da Lazy Loading jedoch direkt vom Browser unterstützt wird, ist keine externe Bibliothek erforderlich. Lazy Loading auf Browserebene sorgt auch dafür, dass das Laden von Bildern weiterhin funktioniert, auch wenn der Client JavaScript deaktiviert. Das Laden wird jedoch nur verzögert, wenn JavaScript aktiviert ist.

Das Attribut loading

Chrome lädt Bilder mit unterschiedlichen Prioritäten, je nachdem, wo sie sich im Verhältnis zum Darstellungsbereich des Geräts befinden. Bilder unterhalb des Darstellungsbereichs werden mit einer niedrigeren Priorität geladen, aber sie werden trotzdem beim Laden der Seite abgerufen.

Mit dem Attribut loading können Sie das Laden von Bildern außerhalb des sichtbaren Bereichs vollständig verzögern:

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

Dies sind die unterstützten Werte für das Attribut loading:

  • lazy: Das Laden der Ressource wird verzögert, bis sie einen berechneten Abstand zum Darstellungsbereich erreicht.
  • eager: Standardmäßiges Ladeverhalten des Browsers. Das ist dasselbe, als wenn das Attribut nicht angegeben wird. Das Bild wird unabhängig davon geladen, wo es sich auf der Seite befindet. Dies ist die Standardeinstellung. Es kann jedoch nützlich sein, sie explizit festzulegen, wenn Ihr Tool automatisch loading="lazy" hinzufügt, wenn kein expliziter Wert vorhanden ist, oder wenn Ihr Linter eine Beschwerde ausgibt, wenn es nicht explizit festgelegt ist.

Beziehung zwischen dem Attribut loading und der Abrufpriorität

Der Wert eager ist eine Anweisung, das Bild wie gewohnt zu laden, ohne das Laden weiter zu verzögern, wenn sich das Bild außerhalb des sichtbaren Bereichs befindet. Das Bild wird nicht schneller geladen als ein anderes Bild ohne das Attribut loading.

Wenn Sie die Abrufpriorität eines wichtigen Bildes (z. B., des LCP-Bildes) erhöhen möchten, verwenden Sie Abrufpriorität mit fetchpriority="high".

Ein Bild mit loading="lazy" und fetchpriority="high" wird verzögert, solange es sich außerhalb des sichtbaren Bereichs befindet. Wenn es sich fast im Darstellungsbereich befindet, wird es mit hoher Priorität abgerufen. Diese Kombination ist nicht wirklich notwendig, da der Browser dieses Bild wahrscheinlich ohnehin mit hoher Priorität laden würde.

Grenzwerte für den Abstand zum Darstellungsbereich

Alle Bilder, die sofort ohne Scrollen sichtbar sind, werden normal geladen. Bilder, die sich weit unterhalb des Darstellungsbereichs des Geräts befinden, werden nur abgerufen, wenn der Nutzer in ihre Nähe scrollt.

Bei der Chromium-Implementierung von Lazy Loading wird versucht, Bilder außerhalb des sichtbaren Bereichs so früh zu laden, dass sie vollständig geladen sind, wenn der Nutzer zu ihnen scrollt. Dazu werden sie abgerufen, bevor sie im Darstellungsbereich sichtbar werden.

Der Grenzwert für den Abstand variiert je nach den folgenden Faktoren:

Die Standardwerte für die verschiedenen effektiven Verbindungstypen finden Sie in der Chromium-Quelle. Sie können mit diesen verschiedenen Grenzwerten experimentieren, indem Sie das Netzwerk in den Entwicklertools drosseln.

Verbesserte Dateneinsparungen und Grenzwerte für den Abstand zum Darstellungsbereich

Im Juli 2020 hat Chrome die Grenzwerte für den Abstand zum Darstellungsbereich für das Lazy Loading von Bildern erheblich verbessert, um die Erwartungen von Entwicklern besser zu erfüllen.

Bei schnellen Verbindungen (4G) haben wir die Grenzwerte für den Abstand zum Darstellungsbereich von Chrome von 3000px auf 1250px reduziert. Bei langsameren Verbindungen (3G oder niedriger) wurde der Grenzwert von 4000px auf 2500px geändert. Diese Änderung hat zwei Auswirkungen:

  • <img loading=lazy> verhält sich ähnlich wie bei JavaScript-Bibliotheken für Lazy Loading.
  • Die neuen Grenzwerte für den Abstand zum Darstellungsbereich bedeuten, dass Bilder wahrscheinlich geladen werden, wenn ein Nutzer zu ihnen scrollt.

Im Folgenden finden Sie einen Vergleich zwischen den alten und neuen Grenzwerten für den Abstand zum Darstellungsbereich für eine unserer Demos bei einer schnellen Verbindung (4G):

Die neuen und verbesserten Grenzwerte für das Lazy Loading von Bildern reduzieren die Grenzwerte für den Abstand zum Viewport für schnelle Verbindungen von 3.000 Pixel auf 1.250 Pixel.
Vergleich der älteren und neueren Grenzwerte für das Lazy Loading auf Browserebene.

und die neuen Grenzwerte im Vergleich zu LazySizes (einer beliebten JavaScript-Bibliothek für Lazy Loading):

Die neuen Grenzwerte für den Abstand zum Viewport in Chrome laden 90 KB an Bildern, während LazySizes unter denselben Netzwerkbedingungen 70 KB lädt.
Vergleich der Grenzwerte für das Lazy Loading in Chrome und LazySizes.

Dimensionen für Bilder angeben

Während der Browser ein Bild lädt, kennt er die Abmessungen des Bildes nicht sofort, es sei denn, sie sind explizit angegeben. Damit der Browser genügend Platz auf einer Seite für Bilder reservieren und störende Layoutverschiebungen vermeiden kann, empfehlen wir, allen <img>-Tags die Attribute width und height hinzuzufügen.

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

Alternativ können Sie die Werte direkt in einem Inline-Stil angeben:

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

Die Best Practice zum Festlegen von Dimensionen gilt für <img> Tags unabhängig davon, ob Sie sie per Lazy Loading laden. Durch Lazy Loading kann sie jedoch wichtiger werden.

Lazy Loading in Chromium ist so implementiert, dass Bilder mit größerer Wahrscheinlichkeit geladen werden, sobald sie sichtbar sind. Es besteht jedoch immer noch die Möglichkeit, dass sie nicht zum richtigen Zeitpunkt geladen werden. Wenn das passiert, erhöht das Fehlen von width und height für Ihre Bilder die Auswirkungen auf die kumulative Layoutverschiebung. Wenn Sie die Abmessungen Ihrer Bilder nicht angeben können, können Sie durch das Lazy Loading Netzwerk ressourcen sparen, aber das Risiko erhöhter Layoutverschiebungen besteht.

In den meisten Fällen werden Bilder weiterhin per Lazy Loading geladen, wenn Sie keine Abmessungen angeben. Es gibt jedoch einige Sonderfälle, die Sie kennen sollten. Ohne Angabe von width und height werden die Bildabmessungen standardmäßig auf 0 × 0 Pixel festgelegt. Wenn Sie eine Bildergalerie haben, kann der Browser entscheiden, dass alle Bilder am Anfang in den Darstellungsbereich passen, da jedes Bild keinen Platz einnimmt und kein Bild außerhalb des sichtbaren Bereichs platziert wird. In diesem Fall entscheidet sich der Browser, alles zu laden, wodurch die Seite langsamer geladen wird.

Ein Beispiel für die Funktionsweise von loading mit einer großen Anzahl von Bildern finden Sie in dieser Demo.

Sie können auch Bilder per Lazy Loading laden, die Sie mit dem <picture> Element definiert haben:

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

Obwohl der Browser entscheidet, welches Bild aus den <source> -Elementen geladen werden soll, müssen Sie loading nur dem Fallback-<img>-Element hinzufügen.

Bilder, die im ersten Darstellungsbereich sichtbar sind, immer sofort laden

Verwenden Sie für Bilder, die sichtbar sind, wenn der Nutzer die Seite zum ersten Mal lädt, und insbesondere für LCP-Bilder, das standardmäßige sofortige Laden des Browsers, damit sie sofort verfügbar sind. Weitere Informationen finden Sie unter Auswirkungen von zu viel Lazy Loading auf die Leistung.

Verwenden Sie loading=lazy nur für Bilder außerhalb des ersten Darstellungsbereichs. Der Browser kann ein Bild erst per Lazy Loading laden, wenn er weiß, wo es sich auf der Seite befinden soll. Dadurch werden sie langsamer geladen.

<!-- 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">

Graduelle Fehlertoleranz

Browser, die das Attribut loading nicht unterstützen, ignorieren es. Sie profitieren nicht von Lazy Loading, aber es hat keine negativen Auswirkungen, wenn es verwendet wird.

FAQ

Einige häufig gestellte Fragen zum Lazy Loading auf Browserebene.

Kann ich Bilder in Chrome automatisch per Lazy Loading laden?

Bisher hat Chromium automatisch alle Bilder per Lazy Loading geladen, die sich gut für eine Verzögerung eigneten, wenn der Lite-Modus in Chrome für Android aktiviert war und das loading Attribut entweder nicht angegeben oder auf loading="auto" gesetzt war. Der Lite-Modus und wurden jedoch eingestellt und es ist nicht geplant, das automatische Lazy Loading von Bildern in Chrome einzuführen.loading="auto"

Kann ich ändern, wie nah ein Bild am Darstellungsbereich sein muss, bevor es geladen wird?

Diese Werte sind fest codiert und können nicht über die API geändert werden. Sie können sich jedoch in Zukunft ändern, da Browser mit verschiedenen Grenzwertabständen und Variablen experimentieren.

Kann das Attribut loading für CSS-Hintergrundbilder verwendet werden?

Nein, es kann nur mit <img>-Tags verwendet werden.

Mit loading="lazy" kann verhindert werden, dass Bilder geladen werden, wenn sie nicht sichtbar sind, aber sich innerhalb des berechneten Abstands befinden. Diese Bilder befinden sich möglicherweise hinter einem Karussell oder werden für bestimmte Bildschirmgrößen per CSS ausgeblendet. Chrome, Safari und Firefox laden beispielsweise keine Bilder, die mit display: none; formatiert sind, weder für das Bildelement noch für ein übergeordnetes Element. Andere Methoden zum Ausblenden von Bildern, z. B. die Verwendung von opacity:0, führen jedoch dazu, dass der Browser das Bild lädt. Testen Sie Ihre Implementierung immer gründlich, um sicherzustellen, dass sie wie vorgesehen funktioniert.

In Chrome 121 wurde das Verhalten für horizontal scrollende Bilder wie Karussells geändert. Diese verwenden jetzt dieselben Grenzwerte wie das vertikale Scrollen. Das bedeutet, dass Bilder im Karussell-Anwendungsfall geladen werden, bevor sie im Darstellungsbereich sichtbar sind. So ist das Laden von Bildern für den Nutzer weniger auffällig, aber es werden mehr Downloads ausgeführt. In der Demo zum horizontalen Lazy Loading können Sie das Verhalten in Chrome mit dem in Safari und Firefox vergleichen.

Was passiert, wenn ich bereits eine Drittanbieter-Bibliothek oder ein Skript verwende, um Bilder per Lazy Loading zu laden?

Da Lazy Loading in modernen Browsern vollständig unterstützt wird, benötigen Sie wahrscheinlich keine Drittanbieter-Bibliothek oder kein Skript, um Bilder per Lazy Loading zu laden.

Ein Grund, weiterhin eine Drittanbieter-Bibliothek zusammen mit loading="lazy" zu verwenden, ist die Bereitstellung eines Polyfills für Browser, die das Attribut nicht unterstützen, oder um mehr Kontrolle darüber zu haben, wann Lazy Loading ausgelöst wird.

Wie gehe ich mit Browsern um, die Lazy Loading nicht unterstützen?

Das Lazy Loading von Bildern auf Browserebene wird von allen wichtigen Browsern gut unterstützt und wird für die meisten Anwendungsfälle empfohlen, um zusätzliche Abhängigkeiten von JavaScript zu vermeiden.

Wenn Sie jedoch mehr Browser unterstützen oder mehr Kontrolle über die Grenzwerte für das Lazy Loading haben möchten, können Sie eine Drittanbieter-Bibliothek verwenden, um Bilder auf Ihrer Website per Lazy Loading zu laden.

Mit der Eigenschaft loading können Sie erkennen, ob ein Browser die Funktion unterstützt:

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

Lazysizes ist beispielsweise eine beliebte JavaScript-Bibliothek für Lazy Loading. Sie können die Unterstützung für das Attribut loading erkennen, um Lazysizes nur dann als Fallback-Bibliothek zu laden, wenn loading nicht unterstützt wird. So funktioniert es:

  • Ersetzen Sie <img src> durch <img data-src>, um das sofortige Laden in nicht unterstützten Browsern zu vermeiden. Wenn das Attribut loading unterstützt wird, ersetzen Sie data-src durch src.
  • Wenn loading nicht unterstützt wird, laden Sie ein Fallback von Lazysizes und initiieren Sie es. Verwenden Sie die Klasse lazyload, um anzugeben, welche Bilder per Lazy Loading geladen werden sollen:
<!-- 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>

Hier sehen Sie eine Demo dieses Musters. Testen Sie es in einem älteren Browser, um das Fallback in Aktion zu sehen.

Wird Lazy Loading für iFrames auch in Browsern unterstützt?

Browser Support

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

<iframe loading=lazy> wurde ebenfalls standardisiert. So können Sie iFrames mit dem Attribut loading per Lazy Loading laden. Weitere Informationen finden Sie unter Es ist an der Zeit, iFrames außerhalb des sichtbaren Bereichs per Lazy Loading zu laden.

Wie wirkt sich das Lazy Loading auf Browserebene auf Anzeigen auf einer Webseite aus?

Alle Anzeigen, die dem Nutzer als Bilder oder iFrames angezeigt werden, werden wie jedes andere Bild oder jeder andere iFrame per Lazy Loading geladen.

Wie werden Bilder behandelt, wenn eine Webseite gedruckt wird?

Alle Bilder und iFrames werden sofort geladen, wenn die Seite gedruckt wird. Weitere Informationen finden Sie unter Problem #875403.

Erkennt Lighthouse das Lazy Loading auf Browserebene?

In Lighthouse 6.0 und höher werden Ansätze für das Lazy Loading von Bildern außerhalb des sichtbaren Bereichs berücksichtigt, bei denen unterschiedliche Grenzwerte verwendet werden können. So können sie die Überprüfung „Bilder außerhalb des sichtbaren Bereichs verzögert laden“ bestehen.

Bilder per Lazy Loading laden, um die Leistung zu verbessern

Die Browserunterstützung für das Lazy Loading von Bildern kann die Leistung Ihrer Seiten erheblich verbessern.

Beobachten Sie ungewöhnliches Verhalten, wenn diese Funktion in Chrome aktiviert ist? Melden Sie einen Fehler.