"Lazy Loading" meint, dass eine Webseite Bilder verzögert lädt. Anders: Wenn man eine Page öffnet, sieht man die Bilder weiter unten noch gar nicht und man scrollt/wischt sie erst in den so genannten Viewport (= für die Darstellung zur Verfügung stehender Bereich im Browser). Das beschleunigt das Erfolgserlebnis. Der Besucher sieht die Seite schon und noch unnötige Bilder werden erst bei Bedarf geladen.

Bisher verwendete man dafür mehr oder weniger aufwändige JavaScript-Bibliotheken, die natürlich erst vom Browser geladen werden müssen und dann ihre vorbereitende Arbeit tuen müssen. In Zeiten von schwachbrüstigen Mobilgeräten versucht man das, wenn möglich, zu vermeiden.

Deshalb wurde das HTML-Attribut loading für <img> und, nur nebenbei erwähnt (hier nicht Thema), für <iframe>-Tags erfunden. Browser, die das Attribut unterstützen, machen das Lazy Loading damit alleine; ohne zusätzlichen JavaScript-Ballast, den die Webseite buckeln muss. Man spricht von "Nativer Unterstützung" eines Features.

Einschränkung

Bevor Sie zu laut jubeln: Nicht alle Browser unterstützen das loading. Alle grünen Browserversionen auf dieser Übersichtsseite von Caniuse unterstützen es, rote jedoch nicht:

https://caniuse.com/#feat=loading-lazy-attr

Im Moment, wo ich diesen Artikel schreibe, hat Firefox angekündigt, dass ab kommender Version 75 das Attribut auch unterstützt wird. Das sind damit ausreichend häufig von Besuchern verwendete Internet-Browser für mich, damit ich mich damit beschäftige. Deshalb mein kurzer Überblick. Ich hoffe nun erwartungsvoll, dass die Tests bei Firefox alle erfolgreich laufen werden.

Hingewiesen sei auch auf die Tatsache, dass jeder dieser Browser ein gewisses Mitspracherecht hat, wie das Lazy Loading ausgeführt wird. Die Werte (s.u.) die man dem Attribut mitgeben kann, sind eher in der Art "ich empfehle, dieses Bild nach dieser oder jener Variante zu laden". Für Nicht-Nerds jedoch egal in der Praxis.

Grundanwendung, einfacher <img>-HTML-Tag

Wir fügen im HTML für das Bild, also dem <img>-Tag, das Attribut loading="lazy" hinzu. Das war's auch schon.

<img src="/bild.jpg" alt="Grüne Ente" loading="lazy">

Außer lazy gibt es laut Spezifikation noch zwei weitere Werte, die verwendet werden können. Ich verwende sie nie.

  • auto : Überlasse es dem Browser, wie er mit dem Lazy Loading umgeht. Was, wann, wie er es für sinnvoll hält.
  • eager : Lieber Browser, vermeide das Lazy Loading. Lade sofort.

Im Kontext picture mit source und srcset

Auch hier fügt man im HTML für das Bild (Zeile 6 des folgenden Codes), also dem <img>-Tag, das Attribut loading="lazy" hinzu. Die <source>-Tags brauchen das nicht zusätzlich.

<picture>
 <source srcset="/small.JPG" media="(max-width: 340px)">
 <source srcset="/medium.JPG" media="(max-width: 420px)">
 <source srcset="/large.JPG" media="(min-width: 421px)">
 <source srcset="/large.JPG">
 <img loading="lazy" src="/large.JPG" alt="Ein gelbes Auto">
</picture>

<img>-Tag mit integriertem <srcset>

Logisch: Auch hier fügt man im HTML für das Bild (Zeile 3 des folgenden Codes), also dem <img>-Tag, das Attribut loading="lazy" hinzu.

<img src="/small.jpg" srcset="/large.jpg 1024w, /medium.jpg 640w, /small.jpg 320w"
 sizes="(min-width: 36em) 33.3vw, 100vw"
 alt="Ein lila Fahrrad" loading="lazy">

Cross-Browser-Support selbst gemacht

Wer nun unbedingt Wert darauf legt, dass auch Uralt-Browser oder moderne, aber zickige, die nach obiger Caniuse-Übersicht das Attribut loading nicht selbst unterstützen, das loading umsetzen: Hier gibt es 2, 3 Ansätze um zu detektieren, ob ein Browser Unterstützung durch eine JavaScript-Bibliothek braucht und wie man diese ggf. dynamisch nachladen kann:

https://addyosmani.com/blog/lazy-loading/

Joomla-Plugin

Lädt immer JavaScript! Und braucht auch keine spezielle Auszeichnung der Bilder:

https://kubik-rubik.de/de/llfj-lazy-load-for-joomla