Das picture-Tag

26. August 2015 at 16:37
Template_Bilder_Beitrag01

Das picture-Tag wird Web-Nutzung deutlich beschleunigen

Schon seit längerem müssen sich Gestalter und Entwickler mit der immer größeren Verbreitung von mobilen Geräten auseinandersetzen. Dabei sollten die Webseiten nicht nur in ihrer Gestaltung oder ihren Funktionen angepasst werden, sondern auch ihre Ladezeiten.

Das Picture-Tag ist ein HTML5-Element, welches speziell der Bilddarstellung bei responsive Websites dient. Der Browser bekommt mehrere Bildquellen bereitgestellt und wählt abhängig von der Auflösung die passende aus.

codesnippet

Die Bildquellen für verschiedene Auflösungen werden über einen source-Tag bereitgestellt. Der Browser kann nun die angegebenen Media-Queries mit der Auflösung abgleichen und wählt das entsprechende srcset aus.

Der entscheidende Vorteil des picture-Tags ist die verringerte Ladezeit und die Reduzierung des beanspruchten Datenvolumens, da bei mobilen Geräten kleinere Bilder geladen werden. Zudem besteht ein automatischer Fallback für Browser, die das Picture-Tag bisher noch nicht unterstützen, da hier auf die im img-Tag hinterlegte Bildquelle zurückgegriffen wird.

 

 

Das Tag wird derzeit in folgenden Browsern (und ab nachfolgenden Versionen) unterstützt:

  • Firefox 38
  • Chrome 42
  • Opera 30
  • Android Browser 40
  • Chrome für Android 44

Um das Picture-Tag auch in anderen Browsern zu nutzen, kann das Polyfill „Picturefill“ genutzt werden.

http://scottjehl.github.io/picturefill/

http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element