Picture Tag


Das <picture>-Tag ist ein HTML5-Element, das bei der Erstellung von Responsive Websites verwendet wird. Es regelt die Darstellung von Bildern, um sie für unterschiedliche Endgeräte anzupassen.

Allgemeine Informationen zum Thema

Die Ausgangslage für die Einführung des <picture>-Tags war die steigende Nutzung mobiler Endgeräte. Durch viele verschiedene Displaygrößen, Pixeldichten, Bildformate und Viewports war die Darstellung von Bildern auf Smartphones und Tablets nicht immer optimal. Einerseits beanspruchten sie relativ viel Datenvolumen. Andererseits wurden hochauflösende Bilder auf mobilen Endgeräten oft falsch skaliert, sodass Details nicht mehr sichtbar waren.

Mit anpassungsfähigen Websites änderte sich dies. Die Inhalte der Website wurden nun so optimiert, dass sie auch auf kleineren Displays dargestellt werden konnten. Im Falle von Bildern hatten Nutzer jedoch noch ein Problem: Wenn ein hochauflösendes Bild auf einem kleinen Display geladen wurde, erhöhte das die Ladezeit und beanspruchte immer noch viel Datenvolumen. Das <picture>-Tag stellt hier eine Lösung dar.

Funktionsweise

Das <picture>-Tag bietet dem Browser die Möglichkeit an, sich für ein Bild zu entscheiden, sodass es auf unterschiedlich großen Displays korrekt dargestellt wird. Ein mobiler Browser wählt eine Version, die zu seinem Endgerät und der Größe des Displays passt. Ein Browser auf dem Desktop PC entscheidet sich für eine hohe Auflösung, die zu dem weitaus größeren Bildschirm passt.

Das <picture>-Tag agiert wie ein Container: Es lädt das darzustellende Bild nicht, sondern teilt dem Browser mit, welches Bild vom <img>-Tag geladen werden soll. Das <picture>-Tag enthält das <img>-Tag. Mit dem <picture>-Tag werden Tags wie <source> und <img> jedoch nicht obsolet. Vielmehr umschließt es diese Tags, um sich der Darstellung zu widmen. Die Quelle für ein Bild und weitere Bildattribute werden weiterhin in Standardtags definiert.

Der Unterschied zum <img>-Tag besteht darin, dass <picture> mit bestimmten Attributen assoziiert ist. Diese Attribute bestimmen die Darstellung, sodass ein Bild auch auf mobilen Endgeräten mit kleinen Displays korrekt angezeigt wird.

  • srcset: Dieses Attribut gibt dem Browser ein Set an Bildern, die geladen werden können.
  • media: Das media-Attribut enthält Informationen zu den Media Queries. Hier wird abgefragt, welches srcset mit dem Ausgabemedium verknüpft ist. Handelt es sich zum Beispiel um ein Smartphone mit bestimmten Maßen wie width oder height, kommt das damit verbundene srcset zum Einsatz und die Darstellung wird auf den jeweiligen Medientyp optimiert.
  • sizes: Mit sizes lässt sich definieren, wie viel von dem verfügbaren Viewport ein Bild besetzen darf. Dies erfolgt über die Angabe eines Prozentwertes – zum Beispiel 100%, um den gesamten sichtbaren Bereich des Displays einzunehmen.[1]

Beispiel

In diesem vereinfachten Beispiel umschließt das <picture>-Element sowohl Source als auch Image. Das srcset Attribut bietet dem Browser mehrere Möglichkeiten an, sodass dieser sich für ein geeignetes Bild entscheiden kann. Hinter jedem Bild in srcset steht eine Angabe zur Auflösung: 1x bezeichnet die Standardauflösung, während 2x eine höhere aufweist – beispielsweise für Retina-Displays. 4x ist für hochauflösende 4K Monitore gedacht. Diese Angaben können ebenfalls in der Einheit „width“ erfolgen. Beispielsweise: „bild1x.jpg 640w“. 

<picture>
    <source srcset=”bild1x.jpg 1x, bild2x.jpg 2x, bild4x.jpg 4x”>
    <img src=”bild1x.jpg” alt=”Bild für responsives Layout”>
</picture>

Praxisbezug

Allerdings unterstützen nach derzeitigem Stand nicht alle Browser die neue Funktion. In solchen Fällen gibt es ein Fallback zum <img>-Tag, sodass das Standardbild dargestellt wird. Mitunter kann die Funktion im Chrome und Opera Browser über „experimental Webplatform features“ erlaubt werden. Bei Firefox geschieht dies über „dom.image.picture.enable“ in den Einstellungen des Browsers. Der Internet Explorer prüft die Einbindung des Picture-Tags.[2] Eine aktuelle Alternative ist Picturefill 2.0, das nach dem gleichen Prinzip arbeitet, jedoch JavaScript zur Darstellung und Anpassung der Bilder nutzt. Mit Picturefill kann das <picture>-Element in jedem Browser verwendet werden.[3]

Bedeutung für die Suchmaschinenoptimierung

Sobald die Einbindung in alle gängigen Browser unterstützt wird, wird das <picture>-Tag womöglich zu einem neuen Standard avancieren. Denn grundsätzlich bietet es alle Möglichkeiten der Anpassung an unterschiedliche Bildschirmgrößen, Pixeldichten, Viewports oder Bildauflösungen. Aus SEO-Sicht gehen damit verringerte Ladezeiten einher. Dies kommt dem Nutzer entgegen und wird höchstwahrscheinlich auch von Suchmaschinen als positives Signal bewertet.

Einzelnachweise

  1. ↑ A Complete Guide to the <Picture> Element longhandpixels.net. Abgerufen am 20.03.2015
  2. ↑ Picture Element caniuse.com. Abgerufen am 20.03.2015
  3. ↑ Picturefill 2.0 scottjehl.github.io. Abgerufen am 20.03.2015

Weblinks


Abgerufen von „https://de.ryte.com/wiki/index.php?title=Picture_Tag&oldid=15096“

Kategorie