Lazy Loading von Bildern in HTML: loading="lazy", fetchpriority und decoding

Lazy Loading (verzögertes Laden) von Bildern bedeutet, ein Bild erst herunterzuladen, wenn es kurz davor ist, in den sichtbaren Bereich zu gelangen. In HTML aktivierst du es, indem du loading="lazy" zum <img>-Tag hinzufügst, ohne JavaScript oder Bibliotheken, und alle aktuellen Browser unterstützen es. Die wichtigste Regel: Wende es nicht auf das Hauptbild der Seite an (das für den LCP zählt), denn das muss so früh wie möglich laden.

In diesem Artikel erfährst du, wie das Attribut funktioniert, wie du es mit fetchpriority und decoding kombinierst, welche Fehler es zur Bremse statt zur Verbesserung machen und wie du prüfst, dass es funktioniert.

Was loading=“lazy” genau tut

Trifft der Browser auf ein Bild mit loading="lazy", lädt er es nicht sofort, sondern wartet, bis der Nutzer beim Scrollen in die Nähe kommt. Den Abstand, ab dem der Download beginnt, bestimmt der Browser (in Chrome hängt er vom Verbindungstyp ab und beträgt meist mehrere hundert Pixel), sodass das Bild normalerweise bereit ist, wenn es erscheint.

<img src="/img/diagramm.webp" alt="Diagramm der monatlichen Besuche" width="800" height="500" loading="lazy" decoding="async" />

Das Attribut kennt zwei Werte:

• lazy: verzögert das Laden, bis das Bild nahe am Viewport ist.
• eager: lädt sofort (Standardverhalten, wenn du nichts angibst).

Laut Can I use ist die Unterstützung in modernen Browsern universell: Chrome seit Version 77, Firefox seit 75, Safari seit 15.4 und Edge seit 79. Ein alter Browser, der das Attribut nicht kennt, ignoriert es einfach und lädt das Bild wie gewohnt; es besteht kein Risiko, dass es nicht angezeigt wird.

Warum es wichtig ist: weniger Bytes und besserer LCP

Eine Seite mit zwanzig Bildern, von denen nur drei auf dem Bildschirm sind, lädt ohne Lazy Loading alle zwanzig herunter. Mit loading="lazy" auf den Bildern außerhalb des Viewports lädt sie drei und den Rest nach Bedarf. Das Ergebnis: weniger Datenübertragung, weniger Konkurrenz um Bandbreite und, am wichtigsten für die Core Web Vitals, die kritischen Ressourcen (Hauptbild, Schriften, CSS) kommen früher an.

Die goldene Regel: das LCP-Bild nie verzögern

Der LCP (Largest Contentful Paint) misst, wann das größte sichtbare Element gezeichnet wird. In den meisten Artikeln und Produktseiten ist das Element das Titelbild. Gibst du ihm loading="lazy", behandelt es der Browser als nicht prioritär und lädt es später, als es könnte: Der LCP verschlechtert sich. Die web.dev-Dokumentation zur LCP-Optimierung ist in diesem Punkt eindeutig.

Für das Hauptbild gilt das Gegenteil:

<img src="/img/titelbild.webp" alt="Titelbild des Artikels" width="1200" height="630" loading="eager" fetchpriority="high" decoding="async" />

• loading="eager" (oder das Attribut einfach weglassen), damit es sofort geladen wird.
• fetchpriority="high", um dem Browser zu signalisieren, dass dieses Bild wichtiger ist als die übrigen Ressourcen derselben Kategorie.

Faustregel: Das Bild, das beim Laden der Seite ohne Scrollen sichtbar ist, wird nicht verzögert. Alle anderen schon.

fetchpriority und decoding: die beiden anderen Attribute

fetchpriority

fetchpriority passt die relative Priorität einer Anfrage an. Es akzeptiert high, low und auto. Nutze high für das LCP-Bild und, wenn du magst, low für dekorative Bilder eines Karussells, die anfangs nicht sichtbar sind. Auf alle Bilder zu setzen ergibt keinen Sinn: Wenn alles Priorität hat, hat nichts Priorität.

decoding

decoding="async" erlaubt dem Browser, das Bild außerhalb des Hauptthreads zu dekodieren, sodass der Rest der Seite nicht wartet. Es ist bei praktisch allen Inhaltsbildern sicher. Die Alternative sync ist nur in sehr speziellen Fällen sinnvoll, wenn das Bild exakt im selben Frame wie der umgebende Text erscheinen muss.

Immer mit width und height

Lazy Loading und Abmessungen gehören zusammen. Weiß der Browser nicht, wie viel Platz ein noch nicht geladenes Bild einnimmt, reserviert er null Pixel und schiebt den Inhalt nach unten, sobald das Bild ankommt. Das ist ein Layoutsprung (CLS), ein weiterer Core Web Vital. Deklariere immer width und height mit den tatsächlichen Abmessungen; CSS kann das Bild skalieren (max-width: 100%; height: auto;), ohne das Seitenverhältnis zu verlieren.

CSS-Hintergrundbilder und iframes

Das Attribut loading gibt es nur für <img> und <iframe>. In CSS definierte Hintergrundbilder (background-image) lassen sich damit nicht verzögern; wenn nötig, brauchst du JavaScript mit IntersectionObserver oder solltest überlegen, ob das Bild nicht besser als <img> ins HTML gehört (was auch für Barrierefreiheit und SEO besser ist).

Bei iframes (eingebettete Videos, Karten) funktioniert es genauso:

<iframe src="https://www.youtube-nocookie.com/embed/ID" title="Titel des Videos" width="560" height="315" loading="lazy"></iframe>

Häufige Fehler

1. loading="lazy" automatisch auf alle Bilder setzen. Viele WordPress-Plugins tun das. Prüfe, dass das Titelbild ausgenommen ist.
2. Ohne width und height. Erzeugt CLS und lässt in manchen Browsern das Lazy Loading schlechter arbeiten, weil der Abstand zum Viewport nicht berechnet werden kann.
3. Mit display: none versteckte Bilder. Sie werden trotzdem geladen, sobald der Browser sie als „nah“ einstuft. Was nicht angezeigt werden soll, gehört nicht ins HTML.
4. Darauf vertrauen, dass Lazy Loading riesige Bilder repariert. Verzögertes Laden reduziert das Gewicht nicht. Erst skalieren und in WebP oder AVIF konvertieren; dann verzögern.

So prüfst du, ob es funktioniert

Öffne die Entwicklertools des Browsers, Tab Netzwerk, filtere nach Bildern und lade die Seite neu, ohne zu scrollen. Es sollten nur die sichtbaren Bilder erscheinen. Beim Herunterscrollen siehst du, wie die übrigen nach und nach angefordert werden. In Lighthouse verschwindet die Prüfung „Defer offscreen images“, wenn alles stimmt, und „Largest Contentful Paint image was lazily loaded“ warnt dich, wenn du das Hauptbild versehentlich verzögert hast.

Fazit

loading="lazy" ist der einfachste und sicherste Weg, das Anfangsgewicht einer Seite mit vielen Bildern zu senken: ein Attribut, kein JavaScript und universelle Unterstützung. Damit es eine echte Verbesserung wird, kombiniere es mit width und height, nutze decoding="async" und nimm das Hauptbild mit loading="eager" und fetchpriority="high" aus. Verzögern, was nicht sichtbar ist, und priorisieren, was sichtbar ist, das ist im Kern die ganze Strategie.