<picture>-Tag wird Web-Nutzung bald deutlich beschleunigen
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
Kommentar abgeben
Netiquette beachten!
Jetzt als Amazon Blitzangebot
Ab 06:05 Uhr
Mingtawn Smartwatch für Männer und Frauen,1.57Fitness Tracker mit Pulsmesser Blutsauerstoff,IP68 wasserdichte Schrittzähler Sportuhr für Android und iOS

Original Amazon-Preis
62,99 €
Blitzangebot-Preis
53,54 €
Ersparnis zu Amazon 15% oder 9,45 €
Beliebte Downloads
Video-Empfehlungen
Beliebt im Preisvergleich
- Programmierung:
Neue Nachrichten
Beliebte Nachrichten
Videos
Christian Kahle
Redakteur bei WinFuture
Ich empfehle ...

Meist kommentierte Nachrichten
Forum
-
MS Teams mit Keypass2 anmelden
treptowers - vor 1 Stunde -
Neuer Laptop muß her
Stefan_der_held - Heute 08:56 Uhr -
Frustration wegen Internetradio-Problemen
CaNNoN - Gestern 22:34 Uhr -
Was Spielt Ihr Zur Zeit?
greller - Gestern 21:20 Uhr -
Winfuture.de - Song Of The Day Pt. 4
greller - Gestern 21:12 Uhr
❤ WinFuture unterstützen
Sie wollen online einkaufen?
Dann nutzen Sie bitte einen der folgenden Links,
um WinFuture zu unterstützen:
Vielen Dank!
Alle Kommentare zu dieser News anzeigen