HTML5: Responsive Bilder

Der Begriff “Responsive Design” ist aus dem Webdesign-Bereich nicht mehr wegzudenken. Damit passen sich Webseiten-Layouts sich automatisch an das Endgerät (Desktop-PC, Smartphone, Tablet, TV, ect) an, auf dem sie geöffnet werden. Problem in der Vergangenheit war nur, dass man Bilder/Fotos immer in der größtmöglichen Auflösung bereitstellen musste, die dann bei kleineren Bildschirmen nur verkleinert dargestellt wurden – die Dateigröße blieb jedoch gleich. Dies können wir nun mit dem neuen HTML5-Element <picture> verbessern und damit die Ladezeiten optimieren (gerade bei den mobilen Endgeräten).

Damit stellt man dem Browser von einem Bild/Foto einfach unterschiedliche Größen-Varianten zur Verfügung. Geladen wird nur das passende (z.B. abhängig von der Bildschirmbreite bzw. Browserfenster-Breite).

min-width 

<picture>
<source media="(min-width: 900px)" srcset="large.png" />
<source media="(min-width: 700px)" srcset="medium.png" />
<source srcset="small.png" />

<img src="large.png" alt="Large Picture" />
</picture>


Das <picture>-TAG ist letztendlich nur ein Sammel-Container, in dem man verschiedene Quelle via <source>-TAGs angeben kann. Bei jeder Quelle kann man mit dem media-Attribut mit Hilfe von “Media Queries”, die man aus dem CSS-Bereich her kennt, angeben, ab welcher Browserfenster-Breite diese geladen werden soll. Mit dem srcset-Attribut gibt man den Dateinamen des Bildes/Fotos an. Wenn eine Bedingung einer Quelle nicht übereinstimmt, dann wird die nächste Quelle vom Browser überprüft, ansonsten lädt er diese und nachfolgende Quellen werden ignoriert.

Das abschließende <img>-TAG ist ein Fallback für Browser, die das <picture>-TAG nicht kennen. Unterstützt wird es von Chrome und Firefox ab jeweils Version 38, Microsoft Edge 13 (Windows 10 Version 1511), Safari 9.1, Opera 15 und diversen mobilen Browsern. Eine Übersicht der Browser-Kompatibilität gibt es bei caniuse.com.

Kommentare sind geschlossen