HTML5 Picture Tag: responsive Images nutzen

Mit HTML5 kann man so einiges anstellen und in vielen Dingen ersetzt es vieles, was nur mit JavaScript möglich war. Im Zeitalter der Smartphones und der häufigen Website-Nutzung mit den kleinen Bildschirm, wird vorallem Responsivität wichtiger. In diesem HTML5 Tutorial geht es um responsive Bilder mit dem Picture Tag.

HTML5 Picture Tag: responsive Images

HTML5 Picture Tag: responsive Images

Im obigen Bild siehst du das responsive Bild, welches abhängig von der Bildschirmbreite geladen wird. Ich habe versucht, Smartphone und Desktop-PC darzustellen.

Mehrere Arten, responsive Bilder zu nutzen

Es gibt verschiedene Möglichkeiten, wie man Bilder in Abhängigkeit der Bildschirmbreite laden kann. Wir nutzen das HTML picture-Tag und werden das ganze so bauen, das alle Browser damit klar kommen. Ebenfalls nutzen wir ein Fallback, wenn ältere Browser das picture-Element nicht kennen.

Wir arbeiten mit drei verschiedenen Bilder-Größen:
  • (200 Pixel) small.jpg - für Smartphones
  • (500 Pixel) normal.jpg - für horizontal gestellte Smartphones, kleine Browsergrößen oder Tablets
  • (900 Pixel) big.jpg - alls Fallback und für große Auflösungen

HTML5 Picture Tag Code

Der Code ist recht einfach und logisch aufgebaut. Du kannst ihn dir kopieren oder das Ergebnis live im Webmaster-Glossar Editor ansehen.
<picture>	<source media="(min-width: 900px)" srcset="big.jpg">	<source media="(min-width: 500px)" srcset="normal.jpg">	<source media="(min-width: 200px)" srcset="small.jpg">	<img src="big.jpg" srcset="big.jpg" alt="Alt"></picture>


Erläuterung des HTML5 Picture Code

  • < source > bietet mehrere Bildquellen zu nutzen. Es ist dir überlassen, wieviele du hier nutzt.
  • Das media Attribut lässt verschiedene Einstellungen zu, für uns ist min-width hier das wesentliche. Du kannst verschiedene Media-Queries Angaben tätigen.
  • srcset bestimmt, welche Medienquellen du laden möchtest. Es wäre mehrere, per Komma getrennt, möglich.
  • < img > ist unser zu ladender Fallback mit der normalen src Angabe des Bildpfades