Was ist Lazy Loading für Bilder?

Wenn eine Webseite viele Bilder enthält, erhöht das Laden aller Bilder beim Öffnen der Seite unnötig die anfängliche Ladezeit. Lazy Loading — oder verzögertes Laden — ist eine Technik, bei der jedes Bild erst geladen wird, wenn der Nutzer es gleich sehen wird. Einfach zu implementieren, verbessert es die Website-Performance und das Nutzererlebnis erheblich.

Definition von Lazy Loading

Lazy Loading (wörtlich «fauler Ladevorgang») bedeutet, das Laden von Ressourcen zu verzögern, die nicht sofort auf dem Bildschirm sichtbar sind. Bei Bildern bedeutet dies, dass nur Bilder im sichtbaren Bereich beim Laden der Seite (dem Viewport) sofort heruntergeladen werden. Andere Bilder laden schrittweise, wenn der Nutzer die Seite scrollt.

Ohne Lazy Loading lädt der Browser alle Bilder der Seite sofort beim Öffnen — einschließlich der Bilder am unteren Ende, die der Nutzer möglicherweise nie sieht.

Wie funktioniert Lazy Loading?

Es gibt zwei Hauptansätze für die Implementierung von Lazy Loading für Bilder:

1. Das native HTML-Attribut loading="lazy"

Seit 2019 unterstützen moderne Browser Lazy Loading nativ über ein einfaches HTML-Attribut:

<img src="photo.jpg" alt="Beschreibung" loading="lazy">

Der Browser entscheidet automatisch, wann das Bild basierend auf der Scroll-Position des Nutzers geladen wird. Dies ist die heute empfohlene Methode: keine JavaScript-Bibliothek erforderlich.

2. Die Intersection Observer API (JavaScript)

Bevor das native Attribut standardisiert wurde, verwendeten Entwickler die Intersection Observer API, um zu erkennen, wann ein Bild in den Viewport eintritt, und dessen Laden zu diesem Zeitpunkt auszulösen. Dieser Ansatz bleibt für fortgeschrittenere Verhaltensweisen oder Animationen beim Bild-Eintritt nützlich.

Was sind die Vorteile von Lazy Loading?

Performance und Ladezeit

Durch die Reduzierung der beim Start geladenen Bilder verringert Lazy Loading das anfängliche Seitengewicht und beschleunigt das Rendering. Performance-Metriken wie Largest Contentful Paint (LCP) und Time to Interactive (TTI) werden dadurch verbessert.

Bandbreiteneinsparung

Bilder am unteren Seitenrand werden nur heruntergeladen, wenn der Nutzer tatsächlich dorthin scrollt. Bei einer langen Seite mit vielen Bildern kann dies eine erhebliche Einsparung darstellen — besonders für Besucher auf Mobilgeräten oder mit langsamer Verbindung.

SEO und Core Web Vitals

Google berücksichtigt Core Web Vitals in seinem Ranking. Ein besserer LCP, direkt beeinflusst durch das Laden von Bildern, kann sich positiv auf die Platzierung in den Suchergebnissen auswirken.

Lazy Loading: Was man nicht tun sollte

Lazy Loading ist nicht für alle Bilder geeignet. Zwei häufige Fehler sollten vermieden werden:

• Niemals loading="lazy" auf Hero-Bilder oder Bilder above the fold anwenden — diese Bilder sind beim Laden sichtbar, ihre Verzögerung würde den LCP und die Nutzererfahrung verschlechtern.
• Die Attribute width und height nicht weglassen — ohne definierte Abmessungen kann der Browser keinen Platz für das Bild vor dem Laden reservieren, was Layout-Verschiebungen verursacht, die dem Cumulative Layout Shift (CLS) schaden.

Gut zu wissen: Für Bilder, die beim Laden sofort sichtbar sind (Banner, Hero-Bild, Logo), verwenden Sie stattdessen das Attribut loading="eager" oder lassen Sie das Attribut einfach weg — das ist das Standardverhalten des Browsers.

Browser-Kompatibilität

Lazy Loading und Bild-Hosting

Wenn Sie einen Bild-Hosting-Dienst zum Speichern und Verteilen Ihrer Bilder verwenden, denken Sie immer daran, das Attribut loading="lazy" bei nicht sofort sichtbaren Bildern einzufügen. Die Kombination aus leistungsstarkem Hosting (CDN, automatische Komprimierung) und Lazy Loading maximiert die Anzeigegeschwindigkeit Ihrer Seiten.

Gut zu wissen: Ein qualitativ hochwertiger Bild-Hosting-Dienst stellt stabile direkte URLs für jedes Bild bereit, was die Integration von Lazy Loading vereinfacht: Fügen Sie einfach loading="lazy" zu Ihrem <img>-Tag hinzu, ohne die Quell-URL zu ändern.