Was ist Lazy Loading bei Bildern?

Lazy Loading heißt übersetzt so viel wie faules Laden. Gemeint ist, dass Bilder erst dann geladen werden, wenn der Besucher sie wirklich sieht. Bilder weiter unten auf der Seite warten also, bis man dorthin scrollt. Das spart beim Aufruf der Seite viel Datenmenge und macht den ersten Eindruck deutlich schneller. Gerade bei einer langen Bildergalerie ist der Unterschied gut zu spüren.

So funktioniert verzögertes Laden

Normalerweise lädt der Browser alle Bilder einer Seite sofort, auch die ganz unten. Bei einer langen Galerie sind das schnell Dutzende Dateien auf einmal. Mit Lazy Loading lädt der Browser zuerst nur die Bilder im sichtbaren Bereich, also das, was der Besucher gleich zu Beginn sieht.

Scrollt der Besucher weiter, werden die nächsten Bilder nachgeladen, kurz bevor sie ins Bild kommen. Im Idealfall merkt niemand etwas davon, weil die Bilder rechtzeitig da sind. Der Start der Seite fühlt sich aber deutlich schneller an, weil der Browser nicht erst alles auf einmal holen muss.

Wie du Lazy Loading aktivierst

Für einfache Fälle reicht ein kleines Attribut im Bild-Tag. Die folgende Tabelle zeigt die gängigen Werte und was sie bewirken.

Wert	Bedeutung
loading lazy	Bild wird erst beim Heranscrollen geladen
loading eager	Bild wird sofort geladen
loading auto	Browser entscheidet selbst

Das Attribut loading lazy versteht heute fast jeder Browser von allein. Du brauchst dafür kein zusätzliches Programm und keine besondere Bibliothek. Viele Galerie-Scripts setzen es bereits automatisch für die Vorschaubilder ein, sodass du oft gar nichts von Hand ändern musst.

Wann Lazy Loading sinnvoll ist

Besonders nützlich ist verzögertes Laden bei Seiten mit vielen Bildern. Eine Galerie mit hundert Fotos profitiert stark davon, weil der Browser am Anfang nur einen Bruchteil laden muss. Bei einer Seite mit nur einem einzigen Bild bringt es dagegen kaum etwas.

Diese Fälle eignen sich gut für Lazy Loading:

lange Bildergalerien mit vielen Vorschaubildern
Seiten, die hauptsächlich aus Fotos bestehen
Inhalte, die der Besucher erst durch Scrollen erreicht

Ein wichtiger Hinweis: Das erste, sofort sichtbare Bild solltest du nicht verzögert laden. Es soll ja gleich da sein. Hier passt eager besser, damit der Besucher oben keinen leeren Platz sieht und die Seite vollständig wirkt.

Lazy Loading und die Suchmaschine

Eine häufige Sorge lautet, ob Google die nachgeladenen Bilder überhaupt findet. Bei der einfachen Variante mit dem loading-Attribut ist das kein Problem, denn die Bildadresse steht ganz normal im Quelltext. Anders sieht es aus, wenn Bilder erst per kompliziertem Skript eingesetzt werden. Dann hilft eine Bilder-Sitemap, damit die Suchmaschine die Fotos sicher entdeckt.

Was diese Technik nicht ersetzt

Verzögertes Laden ist ein guter Trick, aber kein Ersatz für kleine Bilder. Wenn jedes Foto mehrere Megabyte groß ist, ruckelt das Nachladen trotzdem, sobald der Besucher schnell scrollt. Verkleinere die Bilder also zuerst und setze danach Lazy Loading obendrauf. Beides zusammen wirkt am besten und sorgt für eine Galerie, die auch auf dem Handy flüssig bleibt.

Was du beachten solltest

Damit das Nachladen ruckelfrei wirkt, sollten Bilder eine feste Höhe und Breite haben. Sonst springt der Inhalt, sobald ein Bild erscheint, und der Besucher verliert die Stelle, an der er gerade gelesen hat. Gib im Code also möglichst die Maße an, dann bleibt das Layout ruhig und Lazy Loading wirkt sauber. Prüfe nach der Umstellung einmal selbst, ob beim Scrollen alle Bilder rechtzeitig erscheinen.

Häufige Fragen

Zum verzögerten Laden tauchen in der Praxis immer wieder dieselben Fragen auf, hier die kurzen Antworten:

Wie aktiviere ich Lazy Loading im Bild-Tag?

Du ergänzt im img-Tag das Attribut loading="lazy", also etwa <img src="foto.jpg" loading="lazy" width="800" height="600">. Das versteht heute fast jeder Browser von allein, eine zusätzliche Bibliothek brauchst du dafür nicht.

Warum springt mein Layout beim Nachladen?

Das passiert, wenn die Bilder keine festen Maße haben, der Effekt heißt Layout-Sprung oder CLS. Gib im Code width und height an, dann reserviert der Browser den Platz schon vorher und der Inhalt bleibt ruhig.

Soll ich auch das erste Bild verzögert laden?

Nein, das erste, sofort sichtbare Bild solltest du mit loading="eager" laden, damit es gleich da ist und oben kein leerer Platz entsteht. Dieses erste Bild bestimmt stark, wie schnell die Seite wirkt, der Fachbegriff dafür ist LCP.