Kategorie: Mobile

Mit einem neuen Tag im HTML Standard soll das Einbinden von Bildern sowie die Anzeige speziell auf mobilen Endgeräten demnächst schneller funktionieren. Mehrere Jahre nach denen der Standard gefasst wurde werden demnächst die ersten Browser den neuen <picture>-Tag unterstützen. Der Grund für das neue Tag sind die zunehmenden Bildschirmgrößen und -auflösungen, in denen Websites dargestellt werden müssen. Derzeit müssen Internetseiten noch separat optimiert werden, damit sie auf verschiedenen Displaygrößen ordentlich angezeigt werden können. Das bringt für Nutzer von mobilen Endgeräten zudem derzeit mit, dass Einschränkungen bei der Nutzung der Seiten in Kauf genommen werden müssen.

Responsive Webdesign ist auch keine Lösung

Im Jahr 2010 hat sich dann das Responsive Webdesign durchgesetzt. Dabei bekommen Nutzer unterschiedlicher Geräte die gleiche Internetseite zu sehen. Dabei müssen die Bilder für Geräte mit großen Displays in entsprechend hoher Auflösung vorliegen. Der Nachteil dabei ist, dass diese dann auch über die mobile Datenanbindung von Smartphones abgerufen werden müssen. Das ist schlecht für das Inklusivvolumen der Nutzer, da somit dieses schneller aufgebraucht ist. Bei dem neuen <picture>-Tag soll sich das ganze etwas anders verhalten. Der Browser bekommt dann verschiedene Bildergrößen angeboten und kann die passende Größe für das gewünschte Display automatisch wählen. Ein Einbettung in eine Internetseite soll anschließend durch das alte Image-Tag erfolgen. Damit soll die maximale Kompatibilität auch mit älteren Browsern gewährleistet werden.

So könnte die Einbindung eines <picture>-Tags laut WinFuture aussehen:

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

Hier kann gesehen werden, dass der <picture>-Tag im Wesentlichen den ganzen Bilderbereich einkapselt. Der <source>-Tag dient dazu, dass die verschiedenen Bildergrößen eingebunden werden können. Der <img>-Tag sorgt dann dafür, dass das Bild ohne Probleme dargestellt werden kann. Bis zum Jahresende sollen die neuen Tags bereits von Google Chrome und dem Mozilla Firefox unterstützt werden. Passende Versionen sind bereits im Dev-Channel der jeweiligen Browser zu finden. Wann das Tag in anderen Browsern zu finden ist, kann derzeit noch nicht gesagt werden.

Bildquelle: Ben Dobrunz  / pixelio.de