Hallo zusammen! Diese Woche möchte ich euch das <picture> Element vorstellen. Dieses soll uns Entwicklern dabei helfen Responsive Bilder auf Webseiten und in Applikationen einzubauen.

Responsive Bilder?
Wenn wir Bilder auf einer HTML Seite einbinden, werden diese -wie das so ist- auf allen Geräten dargestellt. Egal wie groß oder klein diese sind. Das Problem an der Sache: auf vielen modernen Webseiten gibt es vollflächige Hintergrundbilder mit einer Auflösung jenseits der 1920 Pixel in der breite um auch auf einem 27″ Mac gut auszusehen 😉 Und eben diese großen Bilder würden auch auf einem Smartphone geladen werden, obwohl es womöglich keinen Sinn macht.

Unser Ziel sollte es also sein für jedes Gerät das entsprechende Bild zu laden. Dabei geht es aber nicht nur um die reine (Pixel-) breite des Bildschirms sondern auch um die Pixeldichte! Um mehr über Pixeldichte zu lernen schaut bei Wikipedia vorbei.

Wie konnten wir das bisher erreichen?
Während wir unser HTML mit relativ einfachen Mitteln (Media Queries) für sämtliche Display-Größen vorbereitet können, ist es bei Bildern derzeit nicht so einfach möglich und lässt sich eigentlich nur mit Javascript steuern.

// Simple example how to serve different image sizes, Prototype syntax.
var window_width = document.viewport.getDimensions().width, 
    $image = new Element('img'),
    image_sources = {
        'mini': 'src/photo-mini.jpg',
        'small': 'src/photo-small.jpg',
        'normal': 'src/photo-normal.jpg',
        'large': 'src/photo-large.jpg'
    };

if (window_width < 768) {
    $image.writeAttribute('src', image_sources.mini);
} else if (window_width < 992) {
    $image.writeAttribute('src', image_sources.small);
} else if (window_width < 1200) {
    $image.writeAttribute('src', image_sources.normal);
} else {
    $image.writeAttribute('src', image_sources.large);
}

Hierbei können wir allerdings eben nur auf die Pixelbreite des Gerätes eingehen, nicht auf dessen Pixeldichte. Wir bräuchten Media Queries für Bilder... Und genau hier kommt <picture> ins Spiel!

Wie hilft uns das <picture> Element?
Um diese Frage ganz einfach zu erklären: Das <picture> Element ist in der Lage mit Hilfe von Media Queries verschiedene Bilder zu laden:

<!-- Simple Picture-Tag Demo -->

<picture>
    <source src="src/photo-mini.jpg" />
    <source media="(min-width: 768px)" src="src/photo-small.jpg" />
    <source media="(min-width: 992px)" src="src/photo-normal.jpg" />
    <source media="(min-width: 1200px)" src="src/photo-large.jpg" />
    <img src="fallback.jpg" />
    <p>Image desciprtion</p>
</picture>

Dieses einfache Beispiel zeigt uns die Grundlagen des neuen Elements und welche Möglichkeiten wir haben. Die <source> Elemente stellen jeweils eine Media Queries und die entsprechende Bild URL... Alles recht überschaubar 🙂

<!-- Advanced Picture-Tag Demo -->

<picture>
    <source srcset="src/photo-mini.jpg, src/photo-mini-hd.jpg 2x" />
    <source media="(min-width: 768px)" srcset="src/photo-small.jpg, src/photo-small-hd.jpg 2x" />
    <source media="(min-width: 992px)" srcset="src/photo-normal.jpg, src/photo-normal-hd.jpg 2x" />
    <source media="(min-width: 1200px)" srcset="src/photo-large.jpg, src/photo-large-hd.jpg 2x" />
    <img src="fallback.jpg" />
    <p>Image desciprtion</p>
</picture>

Und plötzlich wird das ganze unübersichtlich... Statt dem bekannten src Attribut verwenden wir srcset und eine (auf den ersten Blick) merkwürdige Syntax.
Ich helfe euch hier kurz auf die Sprünge: Während die Media Queries aktuell die Auflösung abgreifen wird das srcset (bzw. das 2x) dafür verwendet die Pixeldichte zu berücksichtigen - das heißt: wir haben hier sämtliche Geräte mit einfacher und doppelter Pixeldichte mit eigenen Bildern versorgt!

Fazit
Das <picture> Element ist etwas spät dran. Derzeit wird es in noch keinem Browser unterstützt... Und das ist der größte Kritikpunkt.
Aber es gibt bereits einige findige Entwickler die an einen Polyfill arbeiten. Einer davon ist Picturefill und scheint auch bisher recht zuverlässig zu funktionieren.

Im Zweifel könnten wir natürlich einfach "zu große" Bilder darstellen. Diese würden dann zwar allen Geräten gut aussehen aber die performance bzw. das surfen auf eurer Seite (grade bei mobilen Geräten) deutlich beeinflussen.

Mit diesen Worten möchte ich mich auch schon wieder für diese Woche von euch verabschieden und hoffe ich konnte euch etwas neues zeigen. Bis zum nächsten mal wünsche ich euch Happy Coding!