<picture>-Tag wird Web-Nutzung bald deutlich beschleunigen

Web, Code, Html Bildquelle: Ashish Lala

Ein neues HTML-Tag soll die Nutzung des Webs vor allem auf mobilen Endgeräten demnächst deutlich beschleunigen. Nach mehreren Jahren der Vorbereitung wird dieses bald von den ersten Browsern unterstützt und soll einen neuen Weg im Umgang mit Bildern eröffnen. Ausgangspunkt der Entwicklung des neuen Tags <picture> war die zunehmende Differenzierung der Geräte, mit denen die Nutzer auf das Web zugriffen. Nachdem hier lange Zeit Desktop-PCs und Notebooks nahezu allein waren, kamen schließlich immer mehr Smartphones mit richtigen Browsern hinzu. Das stellte die Web-Entwickler vor zunehmende Probleme, da die Seiten bis dahin stets für große Bildschirme optimiert waren.

Um hier für Abhilfe zu sorgen, entschieden sich einige für den parallelen Betrieb einer speziellen Version für Mobilgeräte, auf die die Nutzer umgeleitet werden, wenn sie mit einem Smartphone oder Tablet vorbeikommen. Dieser Weg birgt allerdings einige Nachteile, da die Mobile-Seiten meist nicht den gewohnten Funktionsumfang mit sich bringen.

Etwa seit 2010 kam dann das so genannte Responsive Web Design auf. Hier wird allen Nutzern die gleiche Seite angeboten, die aber so aufgebaut ist, dass sich die Inhalte an beliebige Bildschirm-Größen anpassen. Dies funktioniert deutlich besser als die Pflege zweier getrennter Seiten. Doch problemlos ist auch dieser Weg nicht, denn die eingebetteten Bilder müssen über ausreichend Auflösung verfügen, um auch auf großen Displays gut auszusehen. Vor allem beim Zugriff mit dem Smartphone über das Mobilfunknetz führt das nicht nur zu langen Ladezeiten, sondern auch zu einem schneller dahinschmelzenden Datenvolumen. Immerhin ist die durchschnittliche Webseite zur Zeit 1,7 Megabyte groß, wobei etwa 1 Megabyte auf Bilder entfällt.

Einige Entwickler versuchten sich hier damit zu behelfen, dass sie per JavaScript versuchten, abhängig von den Geräte-Spezifikationen verschiedene Bild-Versionen in die Seite einzubinden. Da moderne Browser aber bereits vor dem eigentlichen Rendering beginnen, Fotos vorzuladen, entlastet dies den Datentraffic faktisch nicht.

Eine elegante Lösung

Nach einigen Diskussionen und Auseinandersetzungen mit den Standardisierungsbehörden soll der neue Picture-Tag nun endlich für eine elegante Lösung des Problems sorgen. In diesem soll es möglich werden, dem Browser mehrere Bildgrößen zur Auswahl anzubieten. Dieser entscheidet dann abhängig vom Display, welche verwendet werden soll. Die eigentliche Einbettung des Bildes erfolgt dann aber weiterhin über das klassische Image-Tag, wodurch auch gleich eine Fallback-Option für Browser zur Verfügung steht, die das neue HTML-Element noch nicht unterstützen.

In der Praxis könnte dies dann folgendermaßen aussehen:

<picture>
    <source srcset="cover1x.jpg 1x, cover2x.jpg 2x, cover4x.jpg 4x">
    <img src="cover1x.jpg" alt="Responsive Web Design cover">
</picture>

Der <picture>-Tag kapselt hier den gesamten Bildbereich ein. Über einen gesonderten <source>-Tag werden die Bildquellen für verschiedene Auflösungen bereitgestellt. Die Darstellung an sich übernimmt das gewohnte <img>-Tag, bei dem auf die gewohnten Attribute zur Ausrichtung und Beschreibung des Bildes zurückgegriffen werden kann.

Das neue Picture-Tag wird nach Angaben der jeweiligen Entwickler-Teams zum Jahresende in den finalen Versionen der Browser Chrome und Firefox unterstützt und kann in den Varianten im Dev-Channel bereits ausprobiert werden. Bei den anderen Herstellern gibt es noch keine konkreten Aussagen, ab wann der Support integriert sein wird, alle sicherten jedoch zu, daran zu arbeiten.

Weitere Informationen: A Complete Guide to the