Natives "Lazy Loading" für Bilder. Ohne JavaScript. (Das Attribut "loading")

"Lazy Loading" meint, dass eine Webseite Bilder verzögert lädt. Das erhöht das Erfolgserlebnis. Der Besucher sieht die Seite schon und noch unnötige Bilder werden erst bei Bedarf geladen. 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).

Bild in größter Auflösung öffnen (Popup)

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

Die width- und height-Attribute

Man sollte dem <img>-Tag, das mit einem loading="lazy" ausgezeichnet ist, immer ein width- sowie height-Attribut mitgeben.

Diese dienen in heutigen Zeiten nicht mehr der Bemaßung von Bildern auf der angezeigten Seite, da das ja im Normalfall via CSS-Regeln abgewickelt wird beziehungsweise werden sollte (oder schlicht über die verfügbare Größe des HTML-Containers, in den das Bild eingesetzt wird), sondern diese dienen in diesem Fall dem Zweck dem Browser die Ratio, also das "echte" Seitenverhältnis des Bildes mitzuteilen (Aspect Ratio).

Habe ich also ein Bild von 640 Pixel Breite und 480 Pixel Höhe, hinterlege ich das in meinem Bilder-Tag so:

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

Noch mal: Es geht um das Seitenverhältnis, nicht um die Größe des Bildes auf der Seite. Ich könnte also auch schreiben:

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

--- ODER ---

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

--- ODER ANDERES. Hauptsache die Ratio ist korrekt. ---

Der Browser kann so berechnen wie viel Platz er vorab für das Bild reservieren muss, wenn das Bild dann beim Scrollen geladen wird. So werden andere Elemente und Texte während des Scrollens nicht unruhig verschoben und die Lesbarkeit der Seite gestört.

Je nach verwendetem Seiten-Bastel-System muss man sich vielleicht um die beiden Attribute nicht selber kümmern. Wer Joomla 4 in Reinform verwendet, muss sich oftmals nicht selbst bemühen.