In dieser Serie ging es bisher um den Fluid Grid, das flexible Raster, das sich unterschiedlichen Bildschirmgrößen anpasst und um die Media Queries. Heute ist der letzte Baustein der Responsive-Design-Technik dran, die Fluid Images. Dadurch passen sich auch die Bilder ihrer Umgebung an.
Jeder Webdesigner kennt das: Passt ein Bild in der Größe nicht ins Layout, gerät alles durcheinander. Spalten und Texte verschieben sich und die Optik ist dahin. Das würde mit einer Website passieren, die zwar einen flexiblen Raster hat, aber alle Bilder nur in einer fixen Größe vorhält.
Bilder flexibel machen
Es wäre also gut, wenn sich auch die Bilder in Höhe und Breite anpassen würden. Eine Methode dazu hat Ethan Marcotte in seinem Artikel bei „A List Apart“ vorgestellt.
Um sicherzustellen, dass ein Bild nicht größer sein kann, als der Container, das es umgibt, verwendet er diese CSS-Anweisung:
img { max-width: 100%; }
Damit passt sich das Bild allen Bewegungen des Containers an. Nun ist zwar ausgerechnet die Anweisung max-width ein Befehl, den einige Browser (guess who?) nicht verstehen. Aber mit einem Extra-Stylesheet, das die Anweisung max-width:100% in width:100% umschreibt, lässt sich das Problem beheben.
Auch treten bei starker Verkleinerung unschöne Effekte auf, aber auch dafür gibt es Abhilfe per Javacsript.
Große Datenmengen für kleine Bilder
Ein Nachteil: Ein Bild, das auf dem Smartphone in Briefmarkengröße erscheint, wird trotzdem in hoher Auflösung geladen. Gerade bei langsamen Datenverbindungen ist das eine ziemliche Quälerei. Bei einer Website, die mit vielen Bildern arbeitet, wäre der Trick mit der max-width-Anweisung also nicht mehr viel wert.
Um diesem Problem zu Leibe zu rücken, muss man ein bisschen basteln. Über das HTML5-tag data-fullscr kann man Bilder in unterschiedlichen Größen einbinden. Das kleine Bild ist fürs Händi und das große Bild für den Desktop-Computer.
Ganz ohne Javascript und einen .htaccess-Hack geht es dabei (noch) nicht.
Das Javascript sucht das Bild in der richtigen Auflösung heraus und über ein paar Tricks und Umleitungen wird das Bild in der passenden Version geladen.
Diesen Workaround hat Filamentgroup erarbeitet, die Dateien dazu gibt es bei Github.
Matt Wilcox hat diesen Weg weiterentwickelt. Mit seiner Methode Adaptive Images werden die Bilder auf dem Server – noch bevor sie im Browser landen – auf die richtige Größe heruntergerechnet. Falls vorhanden, wird das passende Bild aus dem Cache geladen. „Adaptive Images“ kann man auch in schon bestehende Seiten integrieren. Denn Grundlage ist immer nur eine einzige Version eines Bildes, nämlich die mit der höchsten Auflösung. Alle anderen Varianten werden daraus generiert.
Alle moderne Browser, der IE8+ und die Browser von iPhone, iPad und neueren Android-Smartphones unterstützen diese Technik. Alle anderen (darunter auch ältere Firefox-Versionen) laden leider weiter brav das Bild in hoher Auflösung.
Im nächsten und letzten Teil wird es spannend. Die Responsive-Design-Methode hat ein paar Fallstricke, die man erst beim näheren Hinsehen erkennt. Was man beim Programmieren einer Website in der Praxis beachten muss, darum geht es im nächsten Artikel.