1) Problemlage

Unterschiedliche Devices benötigen — responsiv — dasselbe Bild in unterschiedlichen Größen/Auflösungen/Formaten/Zuschnitten.

Bildschirmbreite:
Smartphone vs Tablet vs Desktop vs Large Desktop
Hochformat vs Querformat

Auflösung:
72dpi vs 'Retina'

Anbindung:
DSL vs 3G/4G

2) Die alte Lösung mit CSS

Mit media queries werden Abhängigkeiten für Hintergundbilder beschreiben.

Kompatibilität:
caniuse.com/#feat=css-mediaqueries
Ab IE9

Beispiel:

div { background: url('img/wunderkammer-phone.jpg'); }

@media screen and (min-width:1024px) {
           div { background: url('img/wunderkammer-desktop.jpg'); }
}

@media
       screen and (min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi),
       screen and (min-resolution: 2dppx) { 
           div { background: url('img/wunderkammer-retina.jpg'); }
}

3a) Lösung mit HTML5: srcset-Attribut

Direkt im HTML werden Bedingungen für Bild-Elemente gesetzt. Der Browser wägt die Bedingungen gegeneinander ab und trifft eine viewport-basierte Wahl.

Kompatibilität:
caniuse.com/#feat=srcset
Kein IE (erst ab Edge), kein Opera Mini, keine alten Android Browser

Beispiel 1 in Abhängigkeit von der Pixeldichte des jeweiligen Geräts:

<img
    src="wunderkammer.jpg"          <!-- Fallback                     -->
    srcset="wunderkammer-2x.jpg 2x, <!-- Bild 1 bei 2facher Auflösung -->
            wunderkammer-3x.jpg 3x" <!-- Bild 2 bei 3facher Auflösung -->
/>

Beispiel 2 in Abhängigkeit von Breakpoints der Viewport-Breite (vw):

<img 
    src="wunderkammer-0640.jpg"          <-- Fallback (z.B. optimiert für IE Desktop)              -->
    srcset="wunderkammer-0480.jpg  480w, <-- Bilder mit Breitenangabe zur Auswahl                  -->
            wunderkammer-0640.jpg  640w,
            wunderkammer-0960.jpg  960w,
            wunderkammer-1280.jpg 1280w"
    sizes="(max-width: 400px) 100vw,     <-- Fensterbreite & Bildbreite in % vom Viewport          --> 
           (max-width: 960px)  75vw,
                              640px"     <-- Wildcard: Bildbreite für alle Fensterbreiten über 960 -->
/>

Die jeweilige Pixeldichte des Geräts wird einberechnet.

3b) Lösung mit HTML5: picture-Element

Analog zu den Containern <video> und <audio> wurde das Element <picture> eingeführt. Damit ist eine von rein gestalterischen Gesichtspunkten abhängige Auswahl der Bilddatei möglich, z. B. ein hochformatiger Ausschnitt für hochformatige Geräte. Bei der Wahl der Datei hat der Browser hier keinen Spielraum.

srcset und <picture> lassen sich zu komplexen Lösungen kombinieren.

Kompatibilität:
caniuse.com/#feat=picture
Aktuell nur Firefox, Chrome, Opera

Beispiel:

<picture>
    <source media="(min-width: 960px)" srcset="wunderkammer-quer.jpg" />
    <source media="(min-width: 575px)" srcset="wunderkammer-hoch.jpg" />
    <img src="wunderkammer-phone.jpg" />   <!-- Fallback, für Phones -->
</picture>

Wie bei den anderen Containern kann das Element auch zum Anbieten des selben Bildes in unterschiedlichen Dateiformaten benutzt werden, also z. B. WebP für Chrome und JPEG XR für MS IE.

4) Polyfills für nicht-kompatible Browser

Nicht-kompatiblen Browsern können die unbekannten Tags per Script beigebracht werden.

Picturefill 3.0
Respimage

5) Fazit

Auch wenn die Syntax überraschend krude und inkonsistent daherkommt und Anteile von CSS und HTML vermischt, bringen srcset und <picture> die Chance, ab sofort mit responsiven Bildvarianten zu arbeiten. Und zwar standardkonform und zukunftssicher und ohne auf komplexe Scriptlösungen und proprietäres HTML zurückgreifen zu müssen.

Die Möglichkeit des Fallbacks mit <img src> reicht für den Alltagsgebrauch bereits aus, um eine breite Basis von Browsern zu bedienen, für ausgefuchstere Lösungen kann man dann ein Polyfill heranziehen.

Alles in allem: ein Riesenschritt voran.

Webworker Münster