Lazy Loading Images ist eine Performance-Technik, bei der Bilder im Browser erst dann geladen werden, wenn sie tatsächlich in den sichtbaren Bereich (Viewport) gescrollt werden.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: verzögertes Bildladen, deferred image loading, on-demand loading, loading="lazy"
Was ist Lazy Loading Images?
Lazy Loading Images bezeichnet das verzögerte Laden von Grafiken auf einer Webseite: Statt alle <img>-Elemente sofort beim Seitenaufruf zu laden, holt der Browser sie erst, wenn der Nutzer in ihre Nähe scrollt. Das senkt die initiale Datenmenge, verkürzt die Ladezeit und entlastet Mobile-Verbindungen – ein zentraler Hebel für die Core-Web-Vitals und damit auch für SEO.
Erklärung
Bilder gehören auf den meisten Websites zu den größten Datenmengen. Wer eine Landingpage mit 30 Bildern aufruft, sieht im Erstkontakt nur 1–2 davon „above the fold" – der Rest wird erst beim Scrollen relevant. Lazy Loading nutzt diesen Umstand: Der Browser stellt das Laden zurück, bis das Bild kurz vor dem Eintritt in den Viewport steht.
Seit 2020 unterstützen alle modernen Browser natives Lazy Loading über das HTML-Attribut loading="lazy". Damit reicht ein einzeiliger Eintrag im Markup, ohne JavaScript-Bibliothek: <img src="bild.jpg" loading="lazy" alt="…">. Vor der nativen Lösung war Lazy Loading über JavaScript-Bibliotheken wie lazysizes oder per IntersectionObserver üblich – diese Wege sind weiterhin gültig, wenn man feingranulare Kontrolle braucht (z. B. Platzhalter-Blur, Fade-In-Animationen, Trigger-Distanz).
Wichtig: Lazy Loading ist nur dann ein Gewinn, wenn die initialen, sichtbaren Bilder eager geladen werden – also loading="eager" (oder das Attribut weggelassen). Sonst leidet der Largest Contentful Paint (LCP), eine zentrale Core-Web-Vital-Metrik. Für das LCP-Bild empfiehlt Google sogar zusätzlich fetchpriority="high".
Lazy Loading wirkt sich vor allem auf drei Metriken aus: weniger Datenvolumen (gut für Mobile), geringere Time-to-Interactive (weniger Requests parallel) und stabilere Layout-Shifts – sofern man width- und height-Attribute setzt, damit der Browser den Platz reservieren kann.
Beispiele
- Beispiel 1: Online-Magazin mit langen Artikeln und vielen Inline-Bildern – nur die ersten 1–2 Bilder werden eager geladen, alle weiteren bekommen
loading="lazy". - Beispiel 2: E-Commerce-Produktliste mit 60 Kacheln – die oberen 6 (sichtbarer Bereich) eager, der Rest lazy. Spart auf Mobile mehrere MB.
- Beispiel 3: Portfolio-Seite eines Fotografen mit Galerie-Slider – sichtbare Slides eager, alle nachfolgenden Slides lazy, ergänzt um Blur-Placeholder via
<img>-srcsetund LQIP (Low Quality Image Placeholder). - Beispiel 4: Blog-Übersichtsseite mit 20 Artikel-Vorschaubildern – nur die ersten 3 Cards eager, alle anderen lazy mit nativem
loading="lazy". - Beispiel 5: Landingpage mit Hero-Image + Below-the-fold-Sektionen – Hero-Image
loading="eager" fetchpriority="high", alle Section-Images lazy.
In der Praxis
Im modernen Web-Workflow ist natives Lazy Loading der Standard. Next.js, Astro, Nuxt und WordPress (ab 5.5) setzen das Attribut automatisch. Wer Frameworks wie Next.js nutzt, sollte zusätzlich auf <Image>-Komponenten zurückgreifen – sie liefern automatisch Lazy Loading, responsive srcset, moderne Formate (AVIF/WebP) und Blur-Placeholder.
Tools zur Prüfung: Lighthouse, PageSpeed Insights und WebPageTest zeigen, ob Lazy Loading korrekt greift. Wichtige Faustregeln: niemals das LCP-Bild lazy laden, immer width/height setzen (verhindert Cumulative Layout Shift), und Hintergrundbilder per CSS lassen sich nicht nativ lazy laden – hier braucht es weiterhin JavaScript oder IntersectionObserver.
Vergleich & Abgrenzung
Lazy Loading wird oft mit „Deferred Loading" oder „Progressive Loading" verwechselt. Die Begriffe überschneiden sich, meinen aber nicht das Gleiche.
| Merkmal | Lazy Loading | Eager Loading | Progressive Loading |
|---|---|---|---|
| Zeitpunkt | beim Scrollen in den Viewport | sofort beim Seitenaufruf | sofort, aber in Qualitäts-Stufen |
| Ziel | Daten sparen, Ladezeit senken | LCP sichern, schnell sichtbar | wahrgenommene Geschwindigkeit erhöhen |
| Typisch für | Below-the-fold-Bilder | Hero/LCP-Bild | JPEGs mit Progressive-Modus, LQIP |
Häufige Fragen (FAQ)
Schadet Lazy Loading der SEO? Nein – im Gegenteil. Google empfiehlt Lazy Loading ausdrücklich und der Googlebot rendert Seiten inklusive loading="lazy". Wichtig ist nur, dass das LCP-Bild nicht lazy geladen wird und dass Bilder ein alt-Attribut haben.
Brauche ich noch JavaScript-Bibliotheken wie lazysizes? Für die meisten Anwendungsfälle nicht mehr. Natives loading="lazy" reicht in allen aktuellen Browsern. Bibliotheken bleiben sinnvoll, wenn du Hintergrundbilder, IFrame-Lazy-Loading mit Custom-Trigger-Abstand oder Animationen beim Einblenden brauchst.
Soll ich auch IFrames lazy laden? Ja. <iframe loading="lazy"> funktioniert genauso und ist besonders wertvoll bei YouTube-Embeds, Google Maps oder Tracking-Pixeln, die sonst beim Seitenstart blockieren.
Weiterführend
- web.dev – Google (2023): Browser-level image lazy-loading for the web.
- MDN Web Docs (2024): Lazy loading – Browser performance.
- Walton, Philip (2024): Optimize Largest Contentful Paint. web.dev / Google Chrome Team
