Ganz schön faul – Bilder werden lazy mit Lazy-Loading
Webseiten müssen heutzutage die unterschiedlichsten Anforderungen erfüllen. Einen großen Punkt nehmen hier die Bilder ein. Sie müssen gestochen scharf auf „Retina Displays“ aussehen und gleichzeitig mit einer geringen Datenmenge auskommen, um die Ladezeiten der Webseite nicht unnötig zu belasten. Ganz schön viel Druck, der auf den Bildern lastet.
Es gibt einige Lösungen zum Nachladen für Bilder (Lazy-Loading). Wir stellen hier unseren Lösungsweg vor.
Die Ausgangslage
Mit dem Durchbruch der Smartphones mussten sich Webseiten anderen Rahmenbedingungen anpassen. Im Vergleich zu einem Büro-Computer wurde der Bildschirm kleiner, die Internetverbindung langsamer und das Datenvolumen war auf einmal stark begrenzt. Das responsive Webdesign setzte sich durch und die Webseiten passten sich den unterschiedlichen Endgeräten an.
Im Gegensatz zu dieser Entwicklung werden Fernseher und Monitore immer größer, hochauflösender und „smart“. Nach HD kam Full HD, bis hin zu 4K oder gar 5K. Das Surfen vom Sofa aus, zwischen Netflix und der Tagesschau, zieht in den Alltag ein. Responsive Webseiten haben somit auch die Aufgabe, auf solchen großen Bildschirmen und Fernsehern zu funktionieren und hier den ganzen Platz zu nutzen.
Auch das Webdesign hat sich mit der Zeit verändert. Webdesigner setzen aktuell auf große Bilder und Videos. Und auch Suchmaschinen erheben neben den Nutzern Ansprüche an Webseiten – sie sollen performant und informativ zugleich sein.
Lazy-Loading für Bilder
Ein gängiger Weg diesen unterschiedlichsten Ansprüchen gerecht zu werden, ist das Nachladen der Bilder mit dem sog. „Lazy-Loading“.
Alle Bilder einer Webseiten-Seite werden normalerweise beim Aufruf komplett geladen. Das erzeugt eine spürbare Ladezeit. Mit dem Lazy-Loading werden die Bilder erst dann geladen, wenn der Nutzer zu dem sichtbaren Bereich des Bildes scrollt. Das führt dazu, dass beim Aufruf der Webseite keine Bilder geladen werden. Erst wenn die Bilder für den Nutzer sichtbar werden, werden diese geladen. Das erzeugt eine deutlich bessere erste (initiale) Ladezeit, und zum Anderen werden keine Bilder heruntergeladen, die der Nutzer nicht gesehen hat. Ein Vorteil also für Ladezeit und Datenvolumen.
Desweiteren sollten die Bilder in unterschiedlichen Größen bereitgestellt werden. Für ein Smartphone muss beispielsweise kein 1960px großes Bild geladen werden. Hier reicht das gleiche Bild in einer Breite von 360px. So reduziert man deutlich die Datenmenge die heruntergeladen muss, um das Bild darzustellen. Ein weiterer Vorteil für Ladezeit und Datenvolumen.
Anwendung in der Praxis
Wir haben uns zur Lösung dieser Aufgaben für ein frei verfügbares JavaScript-Plugin entschieden: lazysizes. Dieses Plugin deckt die oben genannten Anforderungen ab: das Nachladen der Bilder beim Eintreten in den sichtbaren Bereich und das Austauschen der Bilder mit den zur Verfügung stehenden unterschiedlichen Bildgrößen.
Zum Austausch der Bildgrößen gibt es bereits zwei Lösungen standardmäßig: Das srcset-Attribut und das picture-Tag steuern das Laden von unterschiedlichen Bildgrößen, je nach Bildschirmauflösung. lazysizes erweitert diese Funktionalität u.a. mit dem Laden der passenden Bildgrößen je nach der Breite, in der das Bild dargestellt werden soll – und nicht nach Bildschirmauflösung. Das ist gerade beim Darstellen von Bildern in unterschiedlichen Spalten sinnvoll.
Die Einbindung ist simpel
Die JavaScript-Dateien lazysizes.min.js und ls.respimg.min.js müssen in das Web-Projekt eingebunden werden. Es handelt sich hier um das lazysizes Kern-Plugin und um eine Erweiterung dieses Kerns um ein Polyfill für das srcset-Attribut und das picture-Tag.
lazysizes initialisiert sich selbst, es wird daher kein weiteres JavaScript zur Initialisierung benötigt.
Nun werden Bilder, die mit der CSS-Klasse „lazyload“ ausgestattet werden, bereits beim Eintritt in den sichtbaren Bereich nachgeladen.
Einsatz mit dem srcset-Attribut
Um nun zusätzlich noch die unterschiedlichen Bildgrößen eines Bildes zur Verfügung zu stellen, nutzen wir das srcset-Attribut. Diese Lösung bietet sich allerdings nur für Bilder an, die in jeder Bildschirmgröße ein identisches Seitenverhältnis haben. Soll das Seitenverhältnis des Bildes sich auf z.B. mobilen Endgeräten ändern, muss das picture-Tag (siehe unten) genutzt werden.
<img data-srcset="http://placehold.it/1140x275 1140w, http://placehold.it/820x195 820w, http://placehold.it/620x150 620w, http://placehold.it/420x100 420w" data-sizes="auto" src="https://placehold.it/1140x275" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" class="lazyload-image lazyload" alt="Bild" />
In dem Attribut data-srcset befinden sich kommasepariert die unterschiedlichen Bildgrößen, die zur Verfügung gestellt werden. Jeweils hinter dem Pfad zu dem Bild wird die Breite des Bildes mit z.B. „1140w“ festgehalten.
Das Attribut data-sizes=“auto“ sorgt für das Abstimmen der Bildgrößen auf den Darstellungsbereich des Bildes. D.h. die Bildgrößen werden nicht nach der Bildschirmgröße ausgelesen, sondern nach der Breite, in der das Bild dargestellt werden soll. Dazu ist es zwingend notwendig dem Bild via CSS width: 100%; zu geben. Dies übernimmt bei uns die CSS-Klasse „lazyload-image“
Die Kombination der Attribute src und srcset setzen wir für die Suchmaschinen. Um sicher zu gehen, dass die Suchmaschinen-Crawler die Bilder auslesen können, setzen wir ein Bild via src-Attribut. Damit dieses bei den Nutzern nicht sofort beim Aufruf der Webseite geladen wird, setzen wir zudem das srcset-Attribut mit einem Leerzeichen in base64. Die meisten modernen Browser laden das srcset-Attribut vor dem src-Attribut und da hier etwas hinterlegt ist, wird das src-Attribut ignoriert. Da es sich aber nur um ein Leerzeichen handelt, ist der Lade-Aufwand sehr gering.
lazysizes entscheidet nun je nach Auflösung des Bildschirms und Breite des Darstellungsbereichs des Bildes, welche Bildschirmgröße geladen werden soll. Bei Retina-Displays wird z.B. ein entsprechend hochauflösendes Bild geladen.
Einsatz mit dem picture-Tag
Wenn sich das Seitenverhältnis eines Bildes z.B. auf mobilen Endgeräten verändert, wird auf das picture-Tag zurückgegriffen.
<picture> <source data-srcset="http://placehold.it/1140x550" media="(min-width:821px)" /> <source data-srcset="http://placehold.it/820x600" media="(min-width:621px)" /> <source data-srcset="http://placehold.it/620x150" media="(min-width:421px)" /> <source data-srcset="http://placehold.it/420x400" media="(min-width:0px)" /> <img src="https://placehold.it/1140x550" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" alt="Bild" class="lazyload-image lazyload" /> </picture>
Je Bildgröße wird ein source-Tag angelegt. Hier wird der Bildpfad und die Bildschirmgröße definiert. Die Bildschirmgröße bestimmt, bei welcher Bildschirmmaße das jeweilige Bild geladen werden soll.
Der img-Tag enthält aus den gleichen Suchmaschinen-Gründen wie oben beschrieben ein src- und srcset-Attribut.
Die hier beschriebenen Lösungen für das Lazy-Loading bei Bildern funktionieren in den gängigen modernen Browser, inklusive dem Internet Explorer 11.
Sie haben Fragen zum Lazy-Loading? Oder haben Sie Ihre Webseite noch nicht auf ein responsives Verhalten umgestellt? Dann melden Sie sich bei uns.