Es folgt ein 5.44 MB grosses Bild.

Photo by David Troeger on Unsplash

Aber läd das Foto auch wirklich erst nach der eigentlichen Seite und ihrem Content? Ein Blick in den Network-Tab der Firefox Dev-Tools verrät die Antwort: Ja! Die Webseite wird geladen und angezeigt bevor das Bild selbst abgefragt wird.

Möglich wird diese Herangehensweise durch die Javascript-Library LazySizes. Alle <img>, <iframe> oder <script> Elemente die mit der Klasse lazyload gekennzeichnet werden implementieren lazy loading. Es geht kaum einfacher!

Aber wie lässt sich diese Herangehensweise in Jekyll nutzen, wenn der Buildhost GitHub Pages ist? Glücklicherweise bietet uns Liquid die Möglichkeit, Markdown-Elemente mit css-Klassen zu versehen. Das obige Bild beispielsweise nutzt folgenden Code:

![](/assets/posts/2021-03-20-%20david-troeger-9XzyEzPAHMI-unsplash.jpg){:class="lazyload"}

Die spezifische, optionale Angabe der Klasse ist von mir sehr erwünscht, da ich nicht jedes einzelne Bild auf diese Weise laden möchte, sondern nur sehr große Dateien.