Lazy Loading für Bilder: Wann es sinnvoll ist und wann nicht

Was verändert Lazy Loading?

Lazy Loading verschiebt den Zeitpunkt, zu dem der Browser ein Bild anfordert. Pixelmaße, Format und Komprimierung bleiben gleich. Auf einer langen Rezeptseite braucht ein Besucher den Anfang sofort, erreicht aber vielleicht nie die fünfzehn Fotos am Ende. Deren spätere Anforderung kann unnötige Downloads beim Seitenaufruf vermeiden.

Größenänderung, Komprimierung und Lazy Loading erfüllen unterschiedliche Aufgaben: Sie verringern die Pixelzahl, reduzieren die Dateigröße oder verschieben den Download. Ein großes Bild bleibt auch beim späteren Laden aufwendig. Ein kleines kann spät erscheinen, wenn seine Anforderung zu lange wartet.

Bereite passende Maße mit dem Werkzeug zur Größenänderung vor und prüfe bei Bedarf die Komprimierung. Entscheide dann, welche Bilder am Anfang gebraucht werden. Der Ratgeber zur Dateigröße erklärt die Vorbereitung; hier geht es um den Ladezeitpunkt.

So startest du ohne Programmieren

Du musst kein HTML bearbeiten, um die zuerst benötigten Bilder auszuwählen. Beginne mit einer typischen Produktseite oder einem langen Artikel. Der erste sichtbare Bereich ist der Teil vor dem Scrollen.

1. Vorhandene Einstellung suchen. Schau in der Website-Verwaltung unter Design, Bilder oder Leistung nach „Lazy Loading“ oder „Bilder verzögert laden“. Bezeichnung und Ort variieren; manche Dienste regeln es automatisch. Frage bei Bedarf die Website-Betreuung, bevor du ein weiteres Plugin installierst.
2. Den Seitenanfang bereit halten. Hauptbild und sofort sichtbare Bilder sollten normal laden. Gibt es Ausnahmen, kläre, wie du diese Bilder ausschließt. Aktiviere keine pauschale Regel, bevor du weißt, was mit dem Hauptbild geschieht.
3. Spätere Bilder ausprobieren. Beginne mit Bildern weiter unten im Artikel. Nutze nach Möglichkeit eine Vorschau oder Testseite und kontrolliere anschließend die veröffentlichte Seite. Prüfe Galerien gesondert, da Besucher schnell weiterblättern können.
4. Das Lesen prüfen. Öffne die Seite am Handy und Computer. Erscheint das Hauptbild zügig? Sind spätere Bilder bei langsamem und schnellem Scrollen rechtzeitig da? Springt der Text beim Laden? Teste auch einen Link direkt zu einem unteren Abschnitt.

Bei Problemen mache die gerade geänderte Einstellung rückgängig und hole dir Hilfe für diese Seite. Solche Sichtprüfungen zeigen deutliche Verzögerungen und Sprünge, belegen aber keine Beschleunigung. Dafür brauchst du Messwerte; der Testabschnitt nennt sie.

Du kannst die Website-Betreuung so bitten: „Bitte prüfe Lazy Loading auf dieser Seite. Hauptbild und sofort sichtbare Bilder sollen normal laden, geeignete Bilder weiter unten später. Reserviere ihren Platz, damit der Text nicht springt. Teste am Handy und Computer und vergleiche die Ladezeit des Hauptbilds vorher und nachher.“ Füge den Seitenlink hinzu und nenne Bilder, die spät erscheinen.

Welche Bilder sollten später laden?

Öffne eine typische Seite, ohne zu scrollen. Welche Bilder sind sichtbar und helfen, den Inhalt zu verstehen? Wiederhole das auf einem schmalen Handy und einem großen Bildschirm: Banner, Überschrift und Produktgalerie können anders angeordnet sein.

Entscheidend ist die tatsächliche Position, nicht der Dateiname oder die Upload-Reihenfolge. Das erste Bild in der Mediathek muss nicht das erste auf der Seite sein. Auch ein Bild unter einer langen Einleitung kann in einer anderen Vorlage schon am Anfang erscheinen.

Ist dasselbe Bild am Computer sofort sichtbar, am Handy aber weiter unten, ist normales Laden der sichere Ausgangspunkt. Das Attribut loading bietet keine Medienabfrage wie picture. Ergänze nicht eigens ein Skript für Bildschirmgrößen, um eine einzelne Anfrage zu sparen. Prüfe zuerst, ob diese Anfrage spürbar ins Gewicht fällt.

Versteckte Galeriebilder werden nicht zwangsläufig später geladen. Ein Galerieskript kann sie unabhängig von den Bildattributen vorladen. Teste schnelle Bildwechsel und den Rückweg zu einem früheren Bild, nicht nur das Scrollen.

Warum das Hauptbild nicht warten sollte

Largest Contentful Paint (LCP) misst, wie schnell das größte Inhaltselement im ersten sichtbaren Bereich erscheint. Oft ist es das Hauptfoto, manchmal ein Textblock. Ermittle es im Leistungsbericht. Ist es ein Bild, sollte es nicht verzögert laden. Steht die Bildadresse bereits im ursprünglichen HTML, kann der Browser früher beginnen. Fügt ein Skript sie erst später ein, entsteht möglicherweise zusätzliche Wartezeit.

Ohne Lazy Loading ist ein langsames Hauptbild nicht automatisch schnell. Serverantwort, Dateigröße und Darstellung können weiterhin bremsen. Googles Anleitung zur LCP-Optimierung erklärt die Phasen. Der Pixilo-Ratgeber zu Core Web Vitals unterscheidet Ladeprobleme und Layoutverschiebungen.

Nutze fetchpriority="high" gezielt für ein als wichtig erkanntes Bild. Hohe Priorität für jedes Galeriebild schafft keine sinnvolle Reihenfolge. Der Hinweis hebt eine Lazy-Loading-Verzögerung auch nicht auf.

Vorhandene Funktionen von CMS und Galerie prüfen

Untersuche vor der Installation eines Plugins das Bild auf der veröffentlichten Seite. CMS, Designvorlage oder Optimierungsdienst können das Attribut bereits setzen. Entscheidend sind das erzeugte HTML und die tatsächliche Anfrage, nicht ein Einstellungsname wie „Bildoptimierung“.

Verwalte das Verhalten an einer Stelle. Wenn ein Skript Adressen ersetzt, zusätzliche Elemente um Bilder legt oder Galerieansichten vorlädt, erschwert ein zweiter Mechanismus die Fehlersuche. Beginne mit einer Seite und nimm das Hauptbild von der Verzögerung aus.

CSS-Hintergründe sind ein anderer Fall: Das Ladeattribut eines img lässt sich nicht an eine Hintergrunddefinition hängen. Lass prüfen, wie der Browser diese Datei findet. Bild-HTML in einem Inhaltsblock verändert nicht den Hintergrund der Vorlage.

Natives Lazy Loading im HTML ergänzen

Für ein Bild deutlich unterhalb des ersten sichtbaren Bereichs behältst du die echte Adresse in src und ergänzt das Ladeattribut. Die Beispielpfade sind Platzhalter: Ersetze sie durch eigene Dateien. Der Alt-Text beschreibt den Bildinhalt; Rezeptanweisungen gehören in den Fließtext. Rein dekorative Bilder erhalten alt="".

<img
  src="/images/recipe-step-04.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="Über die Füllung gefalteter Teig mit noch offenen Rändern"
>

Ein als LCP gemessenes Foto am Seitenanfang braucht eine andere Einstellung:

<img
  src="/images/finished-loaf.webp"
  width="1200"
  height="800"
  loading="eager"
  fetchpriority="high"
  alt="Frisch gebackenes Brot mit goldbrauner Kruste"
>

eager bedeutet normales Laden. Ohne loading gilt üblicherweise dasselbe. Die ausdrückliche Angabe hilft, wenn eine Vorlage sonst automatisch Lazy Loading ergänzt. Sie bedeutet keinen sofort fertigen Download. Die MDN-Referenz zum Bildelement erklärt die Attribute.

Der Browser bestimmt, wann ein verzögertes Bild nah genug für die Anforderung ist. Das kann vor seiner Sichtbarkeit sein. Eine Anfrage außerhalb des sichtbaren Bereichs ist deshalb kein Beweis für einen Fehler. Teste nicht anhand eines festen Scrollabstands. Mehr dazu im Lazy-Loading-Ratgeber von web.dev.

Platz reservieren und passende Bildvarianten behalten

Setze width und height auf die Pixelmaße der Quelldatei, hier 1200 × 800. Sie legen die Proportionen fest; CSS kann das Bild kleiner anzeigen. Für ein anders geformtes Bild wären diese Werte falsch. Bei Skalierung ohne Beschnitt hilft diese Regel:

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Ergänze am Bild class="article-image" oder passe eine vorhandene Regel an. Bei festem Beschnitt reservierst du den Platz für die angezeigte Fläche. Kontrolliere das Layout: Andere CSS-Regeln können die Angaben überschreiben.

Lazy Loading ersetzt srcset und sizes nicht. Behalte passende Varianten für die Dateiauswahl. In picture gehört die Ladeeinstellung an das img-Element. Der Ratgeber zu responsiven Bildern enthält vollständige Beispiele.

Änderungen auf der veröffentlichten Seite testen

1. Ausgangswerte notieren. Erfasse URL, Fenstergröße, LCP-Element und LCP-Zeit, den Start der Hauptbildanfrage und die vor dem Scrollen übertragene Bilddatenmenge. Notiere, ob du einen Erstbesuch oder einen Aufruf mit Cache testest.
2. Bildanfragen untersuchen. Öffne vor dem Neuladen das Network-Panel und filtere Bilder. Welche Dateien werden am Anfang angefordert, und wann?
3. Eine Laderegel ändern. Entferne etwa Lazy Loading vom Hauptbild oder aktiviere es für spätere Illustrationen.
4. Die veröffentlichte Änderung bestätigen. Prüfe Attribute und angeforderte Adressen nach der nötigen Cache-Aktualisierung. Eine lokale Vorlagenänderung wirkt noch nicht auf der Live-Seite.
5. Wiederholen und scrollen. Vergleiche gleichartige Messungen. Scrolle langsam und schnell, nutze Galerien und öffne Abschnittslinks. Achte auf leere Flächen und springenden Inhalt.

„Disable cache“ schaltet den Browsercache aus, solange die Entwicklerwerkzeuge geöffnet sind, nicht aber den Server- oder CDN-Cache. Die Chrome-Dokumentation zum Network-Panel erklärt die Untersuchung. Verwende gleiche Netzbedingungen und mehrere Durchläufe, nicht nur den besten Wert.

Starte oben auf der Seite mit gleicher Fenstergröße und gleicher Beobachtungsdauer vor dem Scrollen. Erfasse zuerst die Anfangswerte, sonst verfälschen spätere Bildanfragen den Vergleich. Eine wiederhergestellte Scrollposition kann ein vermeintlich weit entferntes Bild sofort laden lassen.

Eine gute Änderung zeigt den wichtigen Seitenanfang zügig und spätere Bilder rechtzeitig. Weniger frühe Anfragen helfen nur, wenn Lesen und Navigation flüssig bleiben. Der PageSpeed-Ratgeber hilft beim Vergleich.

Beispiel: ein Titelbild und zwölf Illustrationen

Ein langer Artikel hat ein Titelbild am Anfang und zwölf Fotos weiter unten. Eine globale Einstellung verzögert alle dreizehn. Am Handy erscheint das Titelbild spät, obwohl die Datei klein ist. Das ist ein Beispiel für die Vorgehensweise, kein gemessener Geschwindigkeitsgewinn.

Prüfe zuerst, ob das Titelbild das LCP-Element ist. Entferne seine Verzögerung und teste nur diese Änderung. Lade passende spätere Bilder weiterhin verzögert und reserviere ihren Platz. Ist die erste Illustration am Computer sofort sichtbar, sollte auch sie normal laden.

Vergleiche danach Anfragestart und LCP unter ähnlichen Bedingungen. Prüfe alle zwölf Bilder beim Scrollen und per Abschnittslink. Kommt das Titelbild früh an, bleibt aber durch eine Animation versteckt, untersuche die Anzeigeverzögerung statt erneut das Ladeattribut zu ändern.

Bilder für Suchmaschinen zugänglich halten

Verwende passenden Alt-Text und eine echte Bildadresse. Bleibt nur ein Platzhalter, bis jemand klickt oder scrollt, prüfe das Skript genauer. Googles Hinweise zu verzögert geladenen Inhalten empfehlen Laden beim Eintritt in den sichtbaren Bereich, ohne ein Nutzerereignis vorauszusetzen.

Kontrolliere bei Bedarf die gerenderte Seite mit der URL-Prüfung in Search Console. Sind die wichtigen Bildadressen im gerenderten HTML enthalten? Eine Leistungseinstellung garantiert weder die Indexierung aller Bilder noch bessere Platzierungen.

Häufige Fragen

Soll jedes Bild verzögert laden?

Nein. Entscheide nach Position und Bedeutung. Sofort benötigte Bilder, besonders das LCP-Bild, sollten nicht warten.

Wird die Bilddatei dadurch kleiner?

Nein, nur der Zeitpunkt der Anfrage ändert sich. Bei zu vielen Pixeln oder einer großen Datei verkleinere oder komprimiere eine separate Kopie.

Brauche ich eine JavaScript-Bibliothek?

Für natives Lazy Loading gewöhnlicher HTML-Bilder nicht. Ist JavaScript deaktiviert, entfällt die Verzögerung und Bilder mit echten Quelladressen laden normal. Steht die einzige Adresse in data-src, braucht das Skript eine Alternative. Eine eigene Lösung sollte einen konkreten Bedarf erfüllen und sorgfältig getestet werden.

Warum laden manche Bilder außerhalb des sichtbaren Bereichs sofort?

Sie können bereits nah genug sein oder von anderen Seitenteilen vorgeladen werden. Prüfe den Auslöser der Anfrage sowie Galerie und Vorlage, bevor du von einem Fehler ausgehst.

Ersetzt asynchrones Dekodieren Lazy Loading?

Nein. decoding betrifft das Dekodieren und Darstellen, loading die Verzögerung. Eine Einstellung sagt nichts über die andere aus.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)