Webdesign mit PHP

Adaptive Bilder mit Responsive Design

Beim responsiven Design müssen neben den Textinhalten auch Bilder verarbeitet werden. Besonders einfach lässt sich das bei PHP-basierten Websites umsetzen. (Holger Reibold)

Adaptive Bilder mit Responsive Design

© Internet Magazin

Adaptive Bilder mit Responsive Design

Der Zugriff von mobilen Endgeräten wie Notebooks, Tablet-PCs und Smartphones, aber auch die vermehrte Integration von TV-Geräten und Internet stellen Webdesigner täglich vor neue Herausforderungen.

Die Palette der Endgeräte variiert genauso stark wie die Auflösungen der Displays, was wiederum zu erheblichen Unterschieden im Erscheinungsbild und der Bedienung einer Website resultiert.

Das responsive Webdesign versucht nun, die jeweiligen Anforderungen der Geräte zu berücksichtigen sowie die Darstellung und Navigationselemente automatisch für das jeweilige Endgerät zu optimieren.

Während man sich im Desktop-Zeitalter nur mit einigen wenigen Bildschirmauflösungen befassen musste, ist Webdesign heute deutlich komplexer geworden, denn bei der Entwicklung müssen jetzt weitere Kriterien berücksichtigt werden.

Modernes Webdesign muss die Größe des Gerätes selbst, die Bildschirmauflösung, den Betrachtungswinkel (vertikal beziehungsweise horizontal) und auch Eingabemöglichkeiten wie Tastatur, Touchscreen und Sprache berücksichtigen.

Die Skript-Lösung für Bilder

Um flexibel Inhalte für verschiedene Darstellungsgrößen skalieren zu können, sind die sogenannten CSS3 Media Queries eine wesentliche Voraussetzung. Sie strukturieren Webinhalte für bestimmte Bildschirmauflösungen um, doch verwenden sie nach wie vor die meist übergroßen Ausgangsbilder.

Für PHP-basierte Websites hat Matt Wilcox eine einfache Lösung entwickelt, die allen Anforderungen an ein modernes Webdesign genügt. Implementiert ist die Adaptive-Images-Lösung in einem kleinen Skript .

image.jpg

© Internet Magazin

Der Adaptive-Images-Entwickler zeigt auf seiner Website anhand einiger Beispiele, welche Anpassungen mit dem Skript realisierbar sind.

Die Funktionsweise des Skripts ist recht simpel, aber sehr effektiv. Beim Laden einer Seite erzeugt das Skript ein Session-Cookie, in dem die Screen-Größe in Pixeln gespeichert wird. Trifft der Browser nun auf ein Image-Tag, fordert er vom Server das zugehörige Bild an. Dabei wird auch das Cookie an den Server übermittelt.

Geht der Request beim Webserver ein, prüft dieser die .htaccess-Datei und stellt fest, dass dort verschiedene Verarbeitungsregeln definiert sind. Zum Adaptive-Images-Skript gehört auch eine .htaccess-Datei, in der eine Vorgabe spezifiziert ist, dass Requests für Bilddateien an die PHP-Datei adaptive-images.php übergeben werden.

Dann entnimmt das PHP-Skript den Informationen des Cookie, dass das zugreifende Gerät eine maximale Display-Größe von 480 Pixeln hat. Das Skript vergleicht den Display-Wert aus dem Cookie mit der $resolutions-Konfiguration des PHP-Skripts.

Dann prüft das Skript, ob im Ordner /ai-cache/480/ eine skalierte Bilddatei verfügbar ist. Ist das nicht der Fall, folgt das Skript der URL zur ursprünglich angeforderten Bilddatei. Es folgt ein Bildercheck.

Ist die Bildbreite kleiner als das Display des Benutzers, wird die Datei an diesen übermittelt. Ist die Bilddatei allerdings breiter als das Benutzer-Display, erzeugt das PHP-Skript eine verkleinerte Kopie, sichert diese im Ordner /ai-cache/480/ und übermittelt diese Bilddatei dann an den Browser des Users. Dort ist die Bilddatei schließlich in einer skalierten Version für Folgezugriffe verfügbar.

Auch hochauflösende Bilder können angefordert werden

Doch damit nicht genug. Greift ein User mit einem Retina-Display auf die Website zu, so kann mit einer zusätzlichen Konfiguration im Javascript die Auslieferung einer hochauflösenden Bilddatei vorgesehen werden.

Auch Bilder, die einen Cache-Header-Eintrag besitzen, werden von dem Skript verarbeitet. So ist sichergestellt, dass nicht Bilder aus einem Proxy-Server-Cache oder Netzwerkzwischenspeicher verwendet werden. Das Skript ist auch für den Fall gerüstet, dass die Cookie-Unterstützung deaktiviert ist. In diesem Fall liefert es an mobile Endgeräte die kleinste und an Desktop-Geräte die größte verfügbare Bilddatei aus.

Adaptive Images in Betrieb nehmen

Die Verwendung des Adaptive-Images-Skripts ist denkbar einfach: Zunächst laden Sie das ZIP-Archiv von der Projekt-Site herunter und entpacken es. Führen Sie dann einen Upload der Datei adaptive-images.php in das Hauptverzeichnis Ihrer Website durch. Als Nächstes legen Sie den Bilderordner im Hauptverzeichnis an. Weisen Sie diesem die Bezeichnung ai-cache und die Schreibrechte 777 zu.

Prüfen Sie dann, ob sich in Ihrem Hauptverzeichnis bereits eine .htaccess-Datei befindet. Ist das der Fall, laden Sie diese für verschiedene Anpassungen herunter, die für das Zusammenspiel mit dem Adaptive-Images-Skript notwendig sind. Dann kopieren Sie folgenden Code-Block in die .htaccess-Anweisung <ifmodule mod_rewrite.c> und </ifmodule>:

# 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 -------------

Bei der Konfiguration der .htaccess ist es wichtig, das Sie den Dateiordner, in dem die Abbildung für das Webdesign liegt, gezielt von der Skalierung ausschließen. Wenn Sie ein Wordpress-Blog betreiben, sollten Sie die Wordpress-Themes ausklammern, die meist im Ordner images liegen.

Für andere Anwendungen wie einen Magento-Shop gilt Entsprechendes, nur lagern hier die Dateien an anderer Stelle (oft im media-Ordner). Ändern Sie dazu folgende Zeile:

RewriteCond %{REQUEST_URI} !ignore-
this-directory

in:

RewriteCond %{REQUEST_URI} !images

Bei einer Wordpress-Installation ist es sinnvoll, anstelle von images den Ordner themes auszuschließen, da Sie bei einem Wechsel des Themes prüfen müssten, ob der Name des Verzeichnisses mit den Theme-Grafiken noch übereinstimmt. Sie können auch das Verzeichnis mit den zu verkleinernden Bildern explizit angeben:

RewriteCond %{REQUEST_URI} upload

Passen Sie gegebenenfalls die Ordnerbezeichnung entsprechend Ihrer Umgebung an. Nun müssen Sie nur noch das Adaptive-Images-Skript in das Head-Element Ihrer Website integrieren. Bei einer Wordpress-Website ist das die Datei header.php. Fügen Sie dazu folgenden Code ein:

<script>document.cookie='resolution=
'+Math.max(screen.width,screen.height)+'; path=/';</script>
image.jpg

© Internet Magazin

Das PHP-Skript bietet im Abschnitt Options verschiedene Anpassungsmöglichkeiten.

Damit ist die Integration von Adaptive Images abgeschlossen. Beim nächsten Zugriff von einem mobilen Endgerät laufen die anfangs beschriebenen Prüfungen und Aktionen ab. Je nach Bildtypen und Skriptkonfiguration beträgt die Dateigröße des an das mobile Endgerät ausgelieferten Bilds nur noch 10 bis 20 Prozent der Ausgangsdatei.

Das Besondere an dieser Lösung: Sie können Ihre Bilder wie gewohnt in Ihrer Website verwenden, während sich das Skript automatisch im Hintergrund um die notwendigen Anpassungen kümmert. Bequemer geht's nicht.

Skript anpassen

Das Adaptive-Images-Skript leistet bereits in der Grundkonfiguration ganze Arbeit, bietet aber im CONFIG-Bereich noch weitere interessante Anpassungsmöglichkeiten.

Die Standardkonfiguration sieht dann wie folgt aus:

/* CONFIG ------------------------ */
$resolutions = array(1382,992,
768,480,320); // Die Aufloesungsschritte, Bildschirmbreite in Pixel.
$cache_path = "ai-cache"; // Gibt
den Ordner fuer die Bilder an. Er muss beschreibbar sein.
$jpg_quality = 80; // Bestimmt die
Qualitaet der erzeugten JPGs. Zulaessig sind Werte von 0 bis 100.
$sharpen = TRUE; // Bestimmt
die Schaerfe. Mit TRUE werden die Bilder geschaerft.
$watch_cache = TRUE; // Sorgt
dafuer, dass neu hochgeladene Bilder automatisch auch neu verkleinert werden.
$browser_cache = 60*60*24*7; //
Bestimmt die Lebensdauer fuer den Browser-Cache. Die Standardeinstellung: 7 Tage.
$mobile_first = TRUE; // Sollte kein
Cookie vorhanden sein, wird zuerst die mobile Version an den Client uebermittelt. Bei FALSE wird das groesste Bild gesendet.
/* END CONFIG -------------------- */

Mit der Option $resolutions bestimmen Sie die Bildschirmauflösungen, die Sie berücksichtigt haben wollen. In der Standardkonfiguration werden verkleinerte Bilder für große Bildschirme, normale Bildschirme, Tablets, Smartphones und Handys gespeichert.

Auch bei der Wahl des Ordners, zur Ablage der zwischengespeicherten Bilder sind Sie prinzipiell frei. Sie können einen beliebigen Ordner anlegen und diesen für die Speicherung und den Zugriff verwenden. Wichtig ist nur, dass dieser Ordner auch auf Ihrem Server existiert. Passen Sie gegebenenfalls die Option $cache_path an.

Weitere Einstellungen

Das Adaptive-Images-Skript schärft die Bilder standardmäßig nach dem Verkleinern, damit sie die bestmögliche Qualität bieten. Dieser Bearbeitungsaufwand belastet den Server sehr. Bei stark ausgelasteten Servern kann es sinnvoll sein, auf das Schärfen zu verzichten.

Bei schwachbrüstigen Serverumgebungen oder bei Performance-Problemen kann es außerdem sinnvoll sein, die Option $watch_cache zu deaktivieren. Wenn Sie allerdings Ihre Quellbilder ersetzen, müssen Sie den Cache-Ordner manuell leeren.

Mit minimalem Aufwand können Sie mit dem Adaptive-Images-Skript Ihre PHP-Umgebung "mobile ready" machen. Die Bilder werden nach der Integration des Skripts automatisch entsprechend Ihrer Konfiguration angepasst und an die mobilen Endgeräte ausgeliefert.

Andere Plattformen

Doch das Skript hat nicht nur Vorteile, es unterliegt auch einigen Einschränkungen: Um es einsetzen zu können, benötigen Sie eine PHP-Umgebung. Der Entwickler Matt Wilcox ruft seine interessierten Kollegen auf, Portierungen auf andere Plattformen zu implementieren.

Der Einsatz in einem Content-Delivery-Netzwerk ist ebenfalls nicht möglich, denn Adaptive Images ist für die direkte Kommunikation zwischen Browser und Server konzipiert.

Fazit

Das Adaptive-Images-Skript ist eine einfach einzusetzende, aber dennoch zukunftssichere Lösung, um Ihre Website für den Zugriff von mobilen Endgeräten zu optimieren. Dank des integrierten Konvertierungsmechanismus sind nach der Inbetriebnahme keine weiteren Aktionen durch den Entwickler erforderlich.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".