Adaptive Bilder im responsiven Webdesign

Während die Gestaltung für unterschiedlich große Ausgabegeräte mit CSS mittlerweile ganz gut möglich ist, hat responsives Webdesign ein großes Problem: Bilder. Schon für Entwickler ist es nervig, unzählige Größen bereitzustellen. Vollautomatisierte Lösungen, die auch für technisch unversierte Nutzer funktionieren, sind noch um einiges komplizierter.

Eine schöner Ansatz, der zumindest einen großen Teil dieses Gebietes abdeckt, bietet Adaptive Images. Die Software habe ich nicht getestet und sie dürfte für viele ohnehin nicht nutzbar sein, da sie PHP und einen Apache Webserver erfordert. Die Idee ist aber gut und einfach umsetzbar.

Client: Cookie mit Bildschirmdimensionen setzen

Wer generell gegen Cookies und Javascript ist kann jetzt aufhören zu lesen. Via JS setzen wir im Head ein(en?) Cookie mittels JS, in dem die maximale Bildschirmgröße gespeichert wird:

document.cookie = 
    'resolution=' + Math.max(screen.width,screen.height) + '; path=/';

Da wir das Maximum wählen, können wir sicher sein, dass Bilder auch nach dem Kippen des Gerätes ins Querformat noch ordentlich aussehen.

Das war es auch schon. Der Browser sendet ab sofort bei jedem Aufruf die Auflösung mit. Auch bei Bildern, ob aus Img-Element oder CSS.

Server: Bildanfrage abfangen, Bild in neuer Größe erzeugen und umleiten

Serverseitig muss die Anfrage nun auf irgend ein Serverprogramm umgeleitet werden. Dieses kennt den Pfad zum Bild und die gewünschte Dimension. Es nimmt also das Bild, skaliert es herunter und speichert es. Nun schickt es dem Client eine Weiterleitung auf die optimierte Datei. Diese kann sogar permanent sein, da sich die Dimensionen eines Browsers in aller Regel nicht ändern.

Die Skalierung des Bildes ist nur beim ersten mal für eine bestimmte Größe nötig. Später wird auf die bereits erzeugten Varianten verwiesen.

Nur ein Ansatz

Dies ist natürlich nur ein Ansatz. Welche Bilder skaliert werden sollen und wodurch diese vom Server erkannt werden muss für jede Website geklärt werden. Zudem sollte man sich Normgrößen überlegen, damit nicht unzählige Varianten ein und der selben Datei wegen zwei Pixeln Unterschied auf der Platte landen.

Gegenüber verbreiteten Ansätzen gibt es einen zentralen Vorteil. Browser müssen nicht erst alle kleinen Bilder laden um im Nachhinein via Javascript zu erfahren, dass sie diese durch für ihre Größe angemessene Varianten ersetzen sollen. Hier lädt der Client ein Bild und der Server liefert ihm was er braucht.

Der Ansatz funktioniert nicht ohne Javascript und Cookies. Sind diese deaktiviert oder nicht vorhanden, erhält der Browser eine Standardversion des jeweiligen Bildes. Die Website funktioniert somit dennoch wie erwartet, nur die Optimierung fehlt.