HTML5: responsive Bilder mit dem picture-Element

Die Responsivität von Webseiten wird immer wichtiger. Mit den unterschiedlichsten Geräten und Bildschirmauflösungen wird das Web genutzt. Vom kleinen Smartphone-Display, über Desktop-Computer bis zum 40 Zoll Fernseher. Ebenso ist die Ladezeit der Webseite wichtig, um die Absprungrate der Nutzer zu verringern und schnelles surfen zu ermöglichen. Bilder können dank des picture HTML Tags in unterschiedlichen Größen geladen werden. So kannst du Smartphone-Nutzer ein verkleinertes Bild zur Verfügung stellen. Dem Desktop-Nutzer hingegen die volle Auflösung.

In diesem Tutorial werden wir das HTML Picture Element ansehen und verschiedene Bilder je nach Browserauflösung anzeigen lassen.

HTML Picture Element: responsive Images

HTML Picture Element: responsive Images

HTML5 picture-Tag Syntax

<picture>	<source>	<img></picture>

Erläuterung:
  • picture
    Sammeltag für Picture
  • source
    Die Bildquelle. Kann mehrfach benutzt werden, um unterschiedliche Formate zu laden.
  • img
    Standart-Bild - dient als Fallback für ältere Browser oder wenn die Angaben von Source unzutreffend waren.

Beispiel: verschiedene Bildgrößen laden

In einem kleinen Beispiel zeige ich dir das laden verschiedener Bilder in Abhänigkeit der Browsergröße.
<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:
  • media
    Ermöglicht Media Queries zu nutzen. Beispiel: min-width: 900px. Bild unter srcset wird geladen, wenn die Bildschirmbreite mindestens 900 Pixel beträgt.
  • srcset
    Bildpfad-Angabe. Darf im source-Element und img-Emenet vorkommen.
  • src
    Bildpfad-Angabe. Darf hier nur im img-Element genutzt werden.
  • alt
    Das Attribut alt beinhaltet einen alternativen Text, welchen das Bild beschreibt. Der Text wird angezeigt, wenn das Bild (noch) nicht geladen wurde. Darf nur im img-Element stehen, nicht unter source oder picture.