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

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 ist eine Demo der Funktion:

Auf dieser Seite wird Schritt für Schritt erklärt, wie Sie Lazy Loading im Browser implementieren.

Was spricht für Lazy Loading auf Browserebene?

Laut HTTP-Archiv sind Bilder bei den meisten Websites der am häufigsten angeforderte Asset-Typ und benötigen in der Regel mehr Bandbreite als jede andere Ressource. Beim 90. Perzentil senden Websites über 5 MB an Bildern auf Computern und Mobilgeräten.

Bisher gab es zwei Möglichkeiten, das Laden von nicht sichtbaren Bildern zu verzögern:

• Intersection Observer API verwenden
• Event-Handler scroll, resize oder orientationchange verwenden

Beide Optionen können Entwicklern das Lazy Loading ermöglichen. Viele Entwickler haben außerdem Bibliotheken von Drittanbietern erstellt, um noch einfacher zu verwendende Abstraktionen bereitzustellen.

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

Das Attribut loading

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

Mit dem Attribut loading können Sie das Laden von nicht sichtbaren Bildern vollständig verzögern:

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

Folgende Werte werden für das Attribut loading unterstützt:

• lazy: Das Laden der Ressource wird verzögert, bis eine berechnete Entfernung vom Darstellungsbereich erreicht ist.
• eager: Das Standardladeverhalten des Browsers, das dem Fehlen des Attributs entspricht. Es bedeutet, dass das Bild unabhängig von seiner Position auf der Seite geladen wird. Das ist die Standardeinstellung, aber es kann nützlich sein, sie explizit festzulegen, wenn Ihre Tools loading="lazy" automatisch hinzufügen, wenn kein expliziter Wert vorhanden ist, oder wenn Ihr Linter sich beschwert, wenn er 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 dass der Ladevorgang weiter verzögert wird, wenn das Bild nicht auf dem Bildschirm zu sehen ist. Das Bild wird nicht schneller als ein anderes Bild ohne loading-Attribut geladen.

Wenn Sie die Abrufpriorität für ein wichtiges Bild (z. B. das LCP-Image) erhöhen möchten, verwenden Sie Abrufpriorität mit fetchpriority="high".

Ein Bild mit loading="lazy" und fetchpriority="high" wird nicht auf dem Bildschirm angezeigt und mit hoher Priorität abgerufen, wenn es sich fast im Darstellungsbereich befindet. Diese Kombination ist nicht unbedingt erforderlich, da der Browser das Bild trotzdem mit hoher Priorität laden würde.

Grenzwerte für „Distance-of-viewport“

Alle Bilder, die ohne Scrollen sofort sichtbar sind, werden normal geladen. Bilder, die weit unter dem Darstellungsbereich des Geräts liegen, werden nur abgerufen, wenn der Nutzer in dessen Nähe scrollt.

Mit der Implementierung von Lazy Loading in Chromium soll dafür gesorgt werden, dass nicht sichtbare Bilder früh genug geladen werden, bis sie vollständig geladen sind, wenn der Nutzer zu ihnen scrollt, indem sie sie abrufen, lange bevor sie im Darstellungsbereich sichtbar sind.

Der Schwellenwert für die Entfernung variiert in Abhängigkeit von den folgenden Faktoren:

• Der Typ der abgerufenen Bildressource
• Der effektive Verbindungstyp

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 Dateneinsparung und Schwellenwerte für die Entfernung vom Darstellungsbereich

Im Juli 2020 wurden in Chrome erhebliche Verbesserungen vorgenommen, um die Grenzwerte für das Lazy Loading von Entfernung vom Darstellungsbereich für Bilder an die Erwartungen der Entwickler anzupassen.

Bei schnellen Verbindungen (4G) haben wir die Grenzwerte für den Abstand vom Darstellungsbereich in Chrome von 3000px auf 1250px gesenkt. Bei langsameren Verbindungen (3G oder niedriger) haben wir den Schwellenwert von 4000px zu 2500px geändert. Mit dieser Änderung werden zwei Ziele erreicht:

• <img loading=lazy> ähnelt dem von JavaScript-Lazy Loading-Bibliotheken.
• Die neuen Grenzwerte für den Abstand vom Darstellungsbereich bedeuten nach wie vor, dass Bilder wahrscheinlich bereits geladen sind, wenn der Nutzer zu ihnen gescrollt hat.

Unten finden Sie einen Vergleich der alten und neuen Grenzwerte für den Abstand vom Darstellungsbereich für eine unserer Demos über eine schnelle Verbindung (4G):

Vergleich zwischen alten und neuen Grenzwerten:

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

Ihren Bildern Dimensionsattribute zuweisen

Auch wenn der Browser ein Bild lädt, kennt er die Abmessungen des Bildes nicht sofort, es sei denn, sie sind ausdrücklich angegeben. Damit der Browser auf einer Seite genügend Platz für Bilder reservieren und störende Layoutverschiebungen vermeiden können, sollten Sie allen <img>-Tags die Attribute width und height hinzufü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 beim Festlegen von Dimensionen gilt für <img>-Tags unabhängig davon, ob Sie Lazy Loading verwenden. Lazy Loading kann die Bedeutung jedoch erhöhen.

Lazy Loading in Chromium ist so implementiert, dass Bilder eher geladen werden, sobald sie sichtbar sind. Es kann aber trotzdem vorkommen, dass sie nicht zum richtigen Zeitpunkt geladen werden. Wenn dies der Fall ist, wenn Sie width und height für Ihre Bilder nicht angeben, wirkt sich das auf den Cumulative Layout Shift aus. Wenn Sie die Abmessungen Ihrer Bilder nicht angeben können, können Sie mit Lazy Loading Netzwerkressourcen einsparen. Das Risiko erhöhter Layoutverschiebungen besteht.

In den meisten Szenarien gilt das Lazy Load weiterhin, wenn Sie keine Abmessungen angeben. Es gibt jedoch einige Grenzfälle, die Sie kennen sollten. Wenn width und height nicht angegeben sind, werden die Bildabmessungen standardmäßig auf 0 × 0 Pixel festgelegt. Wenn Sie eine Bildergalerie haben, entscheidet der Browser möglicherweise, dass alle Bilder am Anfang in den Darstellungsbereich passen, da jedes Bild keinen Platz einnimmt und kein Bild aus dem Bildschirm verschoben wird. In diesem Fall entscheidet der Browser, dass alles geladen wird, wodurch die Seite langsamer geladen wird.

Ein Beispiel dafür, wie loading mit einer großen Anzahl von Bildern funktioniert, finden Sie in dieser Demo.

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

<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 von einem der <source>-Elemente geladen wird, müssen Sie dem Fallback-Element <img> nur loading hinzufügen.

Laden Sie Bilder, die im ersten Darstellungsbereich sichtbar sind, immer aktiv.

Verwenden Sie für Bilder, die beim ersten Laden der Seite sichtbar sind, und insbesondere für LCP-Bilder, den standardmäßigen „eager Loading“ 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 Bilder erst dann per Lazy Loading laden, wenn er weiß, wo sich das Bild auf der Seite befinden sollte. In diesem Fall werden die Bilder 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">

Graceful Degradation

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

Häufig gestellte Fragen

Kann ich Bilder in Chrome automatisch per Lazy Loading laden?

Bisher hat Chromium automatisch alle Bilder per Lazy Loading geladen, die dafür geeignet waren, verzögert zu werden, wenn der Lite-Modus in Chrome für Android aktiviert war und das Attribut loading entweder nicht angegeben oder auf loading="auto" gesetzt war. Der Lite-Modus und loading="auto" wurden jedoch eingestellt und es ist nicht geplant, Bilder in Chrome automatisch per Lazy Loading bereitzustellen.

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

Diese Werte sind hartcodiert und können nicht über die API geändert werden. Sie können sich jedoch in Zukunft ändern, wenn Browser mit unterschiedlichen Grenzwerten und Variablen experimentieren.

Können CSS-Hintergrundbilder das Attribut loading verwenden?

Nein, du kannst sie nur mit <img>-Tags verwenden.

Funktioniert loading mit Bildern im Darstellungsbereich, die nicht sofort sichtbar sind?

Mit loading="lazy" kann verhindert werden, dass Bilder geladen werden, wenn sie nicht sichtbar sind, aber innerhalb der berechneten Entfernung liegen. Diese Bilder können sich hinter einem Karussell befinden oder von CSS bei bestimmten Bildschirmgrößen versteckt sein. In Chrome, Safari und Firefox werden z. B. keine Bilder mit dem display: none;-Stil geladen, weder für das Bildelement noch für ein übergeordnetes Element. Andere Techniken zum Ausblenden von Bildern, z. B. die Verwendung von opacity:0-Stilen, sorgen trotzdem dafür, 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 von horizontal scrollbaren Bildern wie Karussells geändert. Für diese gelten jetzt dieselben Grenzwerte wie für das vertikale Scrollen. Bei Karussell-Anwendungsfällen werden also Bilder geladen, bevor sie im Darstellungsbereich sichtbar sind. Das bedeutet, dass das Laden des Bildes für den Nutzer weniger wahrnehmbar ist, allerdings auf Kosten von mehr Downloads. In der Demo zum horizontalen Lazy Loading können Sie das Verhalten in Chrome mit Safari und Firefox vergleichen.

Was ist, wenn ich bereits eine Drittanbieterbibliothek oder ein Skript für das Lazy Loading von Bildern verwende?

Da Lazy Loading in modernen Browsern vollständig unterstützt wird, benötigen Sie wahrscheinlich keine Drittanbieterbibliothek und kein Script, um Bilder per Lazy Loading zu laden.

Ein Grund, neben loading="lazy" weiterhin eine Bibliothek eines Drittanbieters 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? {browsers-dont-support}

Erstelle einen Polyfill oder verwende eine Bibliothek eines Drittanbieters, um Bilder auf deiner Website per Lazy Loading zu laden. Mit dem Attribut loading kannst du feststellen, ob ein Browser diese Funktion unterstützt:

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

Lazysizes ist beispielsweise eine beliebte Lazy-Loading-Bibliothek für JavaScript. Unterstützung für das Attribut loading zum Laden von Lazysizes als Fallback-Bibliothek wird nur dann erkannt, wenn loading nicht unterstützt wird. Das funktioniert so:

• Ersetzen Sie <img src> durch <img data-src>, um ein schnelleres 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 aus Lazysizes und initiieren Sie ihn. Verwenden Sie dabei die Klasse lazyload, um anzugeben, welche Images Lazy Loading sind:

<!-- 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 ist eine Demo dieses Musters. Probieren Sie es in einem älteren Browser aus, um das Fallback in Aktion zu sehen.

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

<iframe loading=lazy> wurde ebenfalls standardisiert. So können Sie iFrames mithilfe des Attributs loading Lazy Loading verwenden. Weitere Informationen

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

Alle Anzeigen, die dem Nutzer als Bilder oder iFrames wie alle anderen Bilder oder iFrames per Lazy Loading präsentiert werden.

Wie werden Bilder gehandhabt, 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 Lazy Loading auf Browserebene?

Lighthouse 6.0 und höher werden für Ansätze zum Lazy Loading von nicht sichtbaren Bildern verwendet, bei denen unterschiedliche Schwellenwerte verwendet werden können, sodass diese die Prüfung Nicht sichtbare Images zurückstellen bestehen.

Lazy Loading von Bildern zur Verbesserung der Leistung

Durch die Browserunterstützung für Lazy Loading von Bildern kannst du die Leistung deiner Seiten erheblich verbessern.

Stellen Sie ein ungewöhnliches Verhalten fest, wenn diese Funktion in Chrome aktiviert ist? Melden Sie den Fehler.