Seit es mit Media-Queries möglich ist, Websites an unterschiedliche Displaygrößen anzupassen, sind spezielle mobile Versionen für Websites nicht mehr zwingend notwendig. Allerdings gibt es ein Problem: Während Schriftgrößen, Positionen und Breiten per Media-Queries angepasst werden können, lassen sich Bilder nicht ohne weiteres in unterschiedlichen Auflösungen bereitstellen. Das serverseitig arbeitende Tool „Adaptive Images“ ändert das.

Adaptive Images: Demo auf der Produktwebsite

Zwar lassen sich Grafiken, die per CSS eingebunden werden, per Media Queries in unterschiedlichen Auflösungen einbinden – für Grafiken, die per IMG-Element eingebunden werden, funktioniert das jedoch nicht. Bei Adaptive Images werden per PHP Grafiken je nach vorgegebenen Auflösungen serverseitig verkleinert und ersetzen die Originalgrafik für die jeweilige Auflösung. Eine manuelle Bereitstellung von Grafiken für die verschiedenen Media-Queries-Größen ist nicht notwendig.

„Adaptive Images“ einbinden

Ist Adaptive Images heruntergeladen, muss die Datei adaptive-images.php zum Skalieren der Bilder auf den Server hochgeladen werden. Außerdem ist ein kleines JavaScript einzubinden, welches die Auflösung des Anzeigebereichs ausliest und in einem Cookie speichert:

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

Außerdem ist eine Anpassung in der „.htaccess“ erforderlich, damit alle Grafikdateien nicht mehr direkt, sondern über die Datei adaptive-images.php aufgerufen werden:

RewriteEngine On
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

Falls keine  eigene .htaccess vorhanden ist, kann auch einfach die mitgelieferte Beispiel-Datei hochgeladen werden. Diese ist bereits fertig konfiguriert. Zu guter Letzt muss das Verzeichnis ai-cache mit Schreibberechtigung angelegt werden. Dort werden alle skalierten Grafikdateien abgelegt.

„Adaptive Images“ konfigurieren

Über die Datei adaptive-images.php lassen sich nun noch über verschiedene Variablen diverse Einstellungen vornehmen. So sollte man die unterschiedlichen Auflösungen festlegen, für die jeweils skalierte Dateien erstellt werden sollen:

$resolutions = array(1024, 320);

Über die Variable „$resolutions“ werden in einem Array beliebig viele Auflösungen festgelegt. Im Beispiel werden zwei Auflösungen berücksichtigt. Bei Fenstergrößen über1024 Pixel werden Bilder auf 1024 Pixel skaliert. Bei Auflösungen darunter werden Bilder auf 320 Pixel skaliert.

Unter anderem lässt sich auch das Cache-Verzeichnis ändern, sowie die JPEG-Auflösung und die Schärfe der skalierten Bilder anpassen.

Anstatt Grafikdateien direkt aufzurufen, werden sie über die Datei adaptive-images.php aufgerufen beziehungsweise verarbeitet. Dieses liest den per JavaScript angelegten Cookie aus und erkennt, welche Auflösung das aufrufende Browserfenster oder der mobile Client hat und gibt entsprechend skalierte Grafiken aus, die erstellt und im Cache-Verzeichnis abgelegt werden.

Variante ohne JavaScript

Wer gerne auf JavaScript verzichten möchte, kann Adaptive Images auch ohne verwenden. Dazu muss zusätzlich die Datei ai-cookies.php hochgeladen werden. Da die Auflösung nicht per PHP ausgelesen werden kann, wird CSS genutzt, um per Media-Queries eine entsprechende Auflösung an das PHP-Script zu übergeben:

<style>
  @media only screen and (max-device-width: 1024px) {
    html {
      background-image: url(ai-cookie.php?maxwidth=1024);
    }
  }
  @media only screen and (max-device-width: 320px) {
    html {
      background-image: url(ai-cookie.php?maxwidth=320);
    }
  }
</style>

Die Datei ai-cookies.php wird als nicht sichtbare Hintergrundgrafik eingebunden. Je nach Auflösung wird ihr ein Wert übergeben, der als Cookie gespeichert wird.

Der Nachteil dieser Variante ist, dass sie nicht zuverlässig funktioniert. Zumindest beim erstmaligen Aufrufen der Website durch den Besucher kann es sein, dass der Cookie nicht schnell genug gesetzt ist und die Bilder nicht in der richtigen Auflösung dargestellt werden.

Systemvoraussetzungen und Fazit

Adaptive Images setzt einen Apache-Server mit PHP 5.x und GD lib voraus, was mittlerweile die meisten Provider anbieten. Die Einbindung ist einfach. Adaptive Images lässt sich auch in bestehende Seiten ohne großen Aufwand integrieren. Eine Anpassung der IMG-Elemente ist nicht erforderlich.

(dpe)