Die Lösung “Adaptive Images” wurde von Matt Wilcox entwickelt, um die Dateigröße von Bildern in responsive Webdesigns zu verringern. Mit Hilfe der PHP- und Javascript-Lösung kannst du erreichen, dass von allen Bilder auf deiner Webseite automatisch verschiedene kleinere Bildformate erstellt werden. Diese, in Format und Dateigröße reduzierten Bilder, werden dann genutzt, wenn ein Besucher deiner Webseite z.B. auf einem Smartphone aufruft. Da die Bildschirmgröße eines Smartphone-Displays ja viel geringer ist, müssen so nicht die standardmäßig geladenen, viel zu großen Bilder genutzt werden. Das spart jede Menge Datenmenge und somit Ladezeiten, was besonders auf mobilen Geräten mit langsamen Verbindungen ein großer Vorteil ist.

1. Und so funktioniert’s

Adaptive Images erklaert
Die Grafik illustriert die Bild-Verkleinerung je nach Bildschirmgröße.

“Adaptive Images” kannst du dir über Github herunterladen (Creative Commons Lizenz) und auf deiner Webseite nutzen. Ich beschreibe kurz wie das funktioniert.

Praktischerweise gibt es sogar eine deutschsprachige Anleitung (instructions_de) im Downloads-Ordner. Mit Hilfe dieser Datei kann eigentlich nichts schiefgehen und das Einbinden des Scripts ist auch überhaupt nicht kompliziert.

2. Die benötigten Dateien integrieren

Als erstes fügst du die Datei adaptive-images.php via FTP-Upload direkt in das Hauptverzeichnis deiner Webseite (also dort, wo sich bei WordPress-Installationen auch die config.php Datei befindet).

3. Den Bilderordner anlegen

Dann erstellst du, ebenfalls in diesem Hauptverzeichnis ein neues Verzeichnis mit dem Namen ai-cache. Diesem gibst du die Schreibrechte 777.

Jetzt schaust du, ob sich in deinem Hauptverzeichnis bereits eine .htaccess Datei befindet. Wenn ja, kannst du dir die Datei auf deinen Computer herunterladen. Am besten du legst jetzt noch eine zusätzliche Sicherheitskopie an, bevor du die .htaccess Datei bearbeitest.

Innerhalb von <ifmodule mod_rewrite.c> und </ifmodule> kopierst du jetzt den Code, der in der in der Dokumentation aufgeführt wird:
[php]
# Adaptive-Images ———————————————————————————–

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !ignore-this-directory
# RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too

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 ——————————————————————————-
[/php]

Wichtig ist hier, dass du den Dateiordner, in dem sich die Bilder für dein Webdesign befinden, ausschließt (bei WordPress-Themes ist dies meist der Ordner “images”).

Ändere änderst du die Zeile:
[php]
RewriteCond %{REQUEST_URI} !ignore-this-directory
in:
RewriteCond %{REQUEST_URI} !images
[/php]

und addierst diese in das Script für die .htaccess Datei.

4. Das JavaScript einbinden

Als letzten Schritt musst du nur noch innerhalb des head-tags deiner Webseite (bei einer WordPress-Webseite also in der header.php Datei) das benötigte JavaScript aufrufen. Dazu kannst du die folgende Codezeile integieren:
[js]
<script>document.cookie=’resolution=’+Math.max(screen.width,screen.height)+’; path=/’;</script>
[/js]

Fertig ist die Integration von “Adaptive Images”. Wenn deine Webseite jetzt in einer kleinen Bildschirmgröße aufgerufen wird, werden automatisch verkleinerte Bilder in den ai-cache Ordner angelegt. Diese sind dann in der Dateigröße z.B. von 100KB im Original auf ca. 10KB für Smartphones verkleinert. Das tolle ist, dass du selbst ein Bild nur einmal wie gewohnt auf deine Seite einbinden muss, den Rest übernimmt dann Adaptive Images automatisch.

In der Anleitung findest du neben dieser Standardeinbindung übrigens auch noch weitere Optionen (z.B. die Regulierung der Qualität von jpgs oder die Regulierung der Bildschirmauflösungen). Es gibt außerdem noch eine Anleitung für eine alternative Lösung, die ohne JavaScript funktioniert.

Ich hoffe diese kleine Einführung in die wirklich praktische Adaptive Images-Lösung hat dir weitergeholfen. Über Fragen oder weitere Ergänzungen zum Artikel freue ich mich sehr!