Vor allem bei mobilen Geräten ist es wichtig, nicht zu große Bilder anzubieten. Da vielerorts einfach die Verbindung zu langsam ist um hoch aufgelöste Bilder in akzeptabler Zeit zu laden. Außerdem ist das auch gar nicht nötig, da hoch aufgelöste Bilder sonst nur unnötig herunter skaliert werden müssen.

Die Idee die hinter responsive images ist es, je nach Gerät/Auflösung eine speziell darauf optimierte Version des Bildes auszuliefern. Mit Hilfe von @media queries, CSS Generated Content und der attr() CSS3 Funktion kann dies umgesetzt werden.

Responsive Images

Da das HTML5 img Element nur eine Quelle zulässt, muss hier mit HTML5 data Attributen gearbeitet werden. Die Idee dahinter ist, für jede Bildschirmgröße ein eigenes data Attribut zu haben, welches auf die Quelle des zugehörigen Bildes verweist.

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

Mit Hilfe von @media queries können spezifische CSS Styles für bestimmte Auflösungen und Geräte definiert werden. So können zum Biespiel nur hochauflösende Bilder angezeigt werden, sollte der Besucher einen HD Monitor verwenden. Warum das trotzdem nicht immer die beste Lösung ist, schauen wir uns später an.

Mit Hilfe von CSS3 Generated Content und der attr() Funktion sind wir in der Lage, die Quelle eines img Elements zu verändern.

/** min-device-width := minimale Breite des Geräts vom Besucher */
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Probleme

Diese Methode hört sich zwar super an, bringt aber auch einige Probleme mit sich.

1. Es kann nicht verhindert werden, dass auch unnötige Bilder heruntergeladen werden. So kann zum Beispiel nicht effektiv verhindert werden, dass die Standardquelle heruntergeladen wird. Was im Endeffekt bedeutet, dass es zu längeren Ladezeiten kommen kann.
2. Man geht stillschweigend davon aus, dass eine höhere Auflösung auch automatisch eine bessere Internetverbindung bedeutet. Wenn man aber unterwegs surft und auch mit dem Laptop lieber die geringste Auflösung haben möchte, hat man Pech gehabt.
3. Man wird gezwungen, mehrer Versionen eines Bildes anzufertigen. Dies bedeutet automatisch einen größeren Aufwand zur Erstellung einer Website.
4. Mittlerweile bedeutet eine höhere Auflösung nicht automatisch einen größeren Bildschirm. Wenn man das neue iPad betrachtet hat man eine höhere Auflösung als viele TV Geräte, hat dabei aber trotzdem noch einen wesentlich kleineren Bildschirm.

Nachtrag
Leider wird zum aktuellen Zeitpunkt diese Technik, selbst von modernen Browsern, nicht befriedigend unterstützt! Wer dem Englischen mächtig ist, findet außerdem auf http://nicolasgallagher.com/responsive-images-using-css3/ weitergehende Informationen.