Responsive Webdesign ist eine sehr tolle Sache. Designs und Layouts passen sich auf alle Geräte und Bildschirmgrößen an und sehen immer toll aus. Egal ob auf dem kleinen MacBook Air (oder Ultrabook), dem Smartphone, einem FullHD Fernseher, einem 27″ iMac oder dem neuen MacBook Pro mit Retina-Display. Jedoch beschränkt sich Responsive Webdesign nicht nur auf das Layout und die Oberfläche. Auch die Technik dahinter muss mitspielen und „adaptiv“ sein.

Ein Beispiel

Möchte ich unterwegs mit dem iPhone schnell ein paar Websites ansurfen und mir Informationen einholen ist es ja super, dass die Website auf dem iPhone klasse aussieht, jedoch bringt mir das alles nichts, wenn ich aufgrund großer Bilddateien eine gefühlte Ewigkeit darauf warte, bis sie fertig geladen ist.

Es reicht also nicht, Bilder in voller Auflösung zu laden und über CSS responsive zu machen, sodass sie auf meinem kleinen iPhone gut sichtbar sind. Hier muss direkt das Bild in einer angepassten Auflösung vom Server zur Verfügung gestellt werden. Das spart Ressourcen, Ladezeiten und unnötige Aufreger!

Die Lösung?

„Soll ich jetzt von jedem Bild 6 Versionen abspeichern?“ könnte man sich jetzt Fragen. Ich sage: Nein. Absolut nicht. Für so etwas gibt es passende Lösungen, die einfacher garnicht sein könnten. Eine davon stelle ich heute vor: adaptive-images.

Die Funktionsweise dieser Lösung

Adaptive Images arbeitet im Grunde komplett serverseitig. Das einzige was auf dem Endgerät geschieht, ist das Setzen eines Cookies, welches durch das Script erstellt wird. Dieses Cookie beinhaltet nichts anderes als die Höhe und Breite des Bildschirms in Pixelwerten.

Doch was passiert nun genau, wenn ich mit dem iPhone die Website ansteuere? 

Ganz einfach: die Anfrage nach einem Bild erreicht den Server. Das Script leitet diese Anfrage direkt an eine kleine PHP Datei. Diese liest dann das mitgesendete Cookie aus, verkleinert dann das Bild in die passende Größe und sendet es an das Endgerät zurück. Der Clou: bereits zugeschnittene Bilder legt das Script in einen Cache-Ordner. So wird bei jeder Anfrage kurz nachgesehen, ob das Bild schon zurechgeschnitten abliegt und wenn ja, genau dieses ausgeliefert. Das spart Serverressourcen und Anfragetimings.

Werde ich hier nicht beim Coding beeinträchtigt?

Ganz und gar nicht. Programmiert wird wie jeder einer es gewohnt ist. Das ist der riesen Vorteil von diesem Script. Bilder können per CSS als Background eingesetzt werden oder z.B. einfach als <img/> eingefügt werden. Halt wie man es gewohnt ist. Da das Script die komplette Anfrage abnimmt, ist es vollends egal, wie das Bild auf der Website eingefügt wurde.

Vorraussetzungen und Installation

Voraussetzungen:

Es gibt 3 kleine Vorraussetzungen, die allerdings meist schon von vielen Servern erfüllt werden:

• Apache 2
• PHP in Version 5.x
• GD Lib (für die dynamische Manipulation von Grafiken. Im Normalfall standardmäßig bei PHP dabei)

Erfüllt man diese Vorraussetzungen können wir loslegen:

Die Installation:

Ladet euch hier (adaptive-images.com) direkt die 19kb kleine ZIP herunter und entpackt sie. In dem entpackten Ordner befinden sich folgende Dateien:

• .htaccess (Standardmäßig auf Macs nicht sichtbar – stellt aber kein Problem dar)
• adaptive-images.php
• ai-cookie.php
• changelog.txt
• instructions_de.htm
• instructions.htm

Im Grunde benötigen wir nur 2 dieser Dateien plus eine Zeile Javascript, die in den Head Bereich eurer Webseite kommen muss. Wir beginnen damit, die Datei adaptive-images.php in das Hauptverzeichnis eurer Website zu laden.

Danach müssen wir die .htaccess Datei erstellen und mit verschiedenen Anweisungen befüllen. Wenn ihr schon eine .htaccess Datei habt, könnt ihr diese auch editieren und erweitern.

Ich habe keine .htaccess Datei:

Erstellen Sie über FTP einfach (ACHTUNG: es muss ein Punkt davor sein) und befülle sie mit folgendem Code:

Options +FollowSymlinks

RewriteEngine On

# Adaptive-Images
# Add any directories you wish to omit from the Adaptive-Images process on a

new line, as follows:

# RewriteCond %{REQUEST_URI} !some-directory

# RewriteCond %{REQUEST_URI} !another-directory
RewriteCond %{REQUEST_URI} !assets
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above

directories

# to adaptive-images.php so we can select appropriately sized versions

RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images

Ich habe schon eine .htaccess Datei

Auch garkein Problem. Öffne die .htaccess und suche nach folgender Zeile:

Options +FollowSymlinks

RewriteEngine On

Wenn du sie gefunden hast, füge unterhalb dieses Bereiches folgendes ein (nichts Bestehendes ersetzen, nur hinzufügen):

# Adaptive-Images 

# Add any directories you wish to omit from the Adaptive-Images process on a new

line, as follows:

# RewriteCond %{REQUEST_URI} !some-directory

# RewriteCond %{REQUEST_URI} !another-directory
RewriteCond %{REQUEST_URI} !assets
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above

directories

# to adaptive-images.php so we can select appropriately sized versions

RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images

Es ist wichtig, dass sich die .htaccess Datei und die adaptive-images.php Datei im gleichen Hauptverzeichnis befinden.

Mit diesen zwei Schritten leiten wir die Bildanfragen an den Server direkt durch die .htaccess an die adaptive-images.php Datei weiter. Diese kann bisher allerdings nichts damit anfangen, da es die Bildschirmmaße des Endgerätes nicht kennt.

Dafür fügen wir nun im Head Bereich eurer Webseite folgende Code-Zeile ein:

<script type="text/javascript">// <![CDATA[

document.cookie='resolution='+Math.max(screen.width,

screen.height)+'; path=/';

// ]]></script>

Hier ist es immens wichtig, dass die Zeile im Head Bereich steht, damit das Cookie gesetzt wird bevor die Seite zu Ende lädt.

Als letzten Schritt der reinen Installation erstellen wir im Hauptverzeichnis eurer Seite den Ordner ai-cache und setzen die Rechte auf CHMOD 777.

Konfiguration

Das wars schon für die Installation! Nun können wir die Konfiguration vornehmen. Öffnen wir hierzu die adaptive-images.php Datei. Wir haben hier einige Konfigurationsmöglichkeiten:

/* CONFIG */

$resolutions = array(1382,992,768,480,320); // Die Auflösungsschritte für die Bilder erzeugt werden (Bildschirmbreite in Pixel)

$cache_path = "ai-cache"; // Wo die verkleinerten Bilder gespeichert werden. Der Ordner muss beschreibbar sein.

$jpg_quality = 80; // Die Qualität der erzeugten JPGs 0 bis 100

$sharpen = TRUE; // Verkleinerte Bilder verlieren an Schärfe, bei TRUE werden die Bilder geschärft

$watch_cache = TRUE; // stellt sicher das neu hochgeladene Bilder neu verkleinert werden

$browser_cache = 60*60*24*7; // Die Zeit in Sekunden für den BROWSER cache (Standard 7 Tage)

$mobile_first = TRUE; // Ist kein Cookie vorhanden wird zuerst die mobile Version gesendet (wenn FALSE, wird das grösste Bild gesendet)
/* END CONFIG - Verändern Sie nichts nach dieser Zeile wenn Sie nicht wissen was Sie tun */

$resolutions ist ein Array aus den Auflösungschritten, sprich den Bildschirmbreiten in Pixeln, auf die das Script reagieren soll.

$cache_path bezeichnet den Ordner, den wir eben erstellt haben. Ändern wir hier den Wert, muss der Cache Ordner ebenfalls so benannt werden.

Der Rest ist eigentlich komplett Selbsterklärend und benötigt im Normalfall garkeine Zusatzkonfiguration.

Das war es schon! Wir haben nun das Script erfolgreich auf unserem Server laufen. Je nach Bildschirmgröße des Endgerätes wird der Server nun die passende Größe erstellen und ausliefern. Testet es selber und surft (falls vorhanden) mit eurem Smartphone auf eure Seite. Der Server wird in dem Cache Ordner den Ordner mit der passenden Größe erstellen (in meinem Fall 480) und dadrin die verkleinerten Fassungen der Bild ablegen.

WICHTIG: Das ganze funktioniert natürlich nur dann optimal, wenn die Quellbilder ausreichend groß hochgeladen wurden. So stellt man 100% sicher, dass man die meisten Displaygrößen abgreift.

Fazit:

Ihr seht, mit den passenden Tools in der Hinterhand werden eure Internetauftritte technisch von allerhöchstem Niveau sein! Vorallem in der heutigen Zeit und Fülle an Endgeräten ist es absolut wichtig, immer auf dem neuesten Stand der Technik zu sein um jedem Endbenutzer das optimale Web-Erlebnis zu bieten. Egal von welchem Gerät er euren Webauftritt gerade besucht.