Adaptive Images in TYPO3 How-To

Responsive ist gut und schön, allerdings sollte nicht nur die Darstellung des HTML und CSS bei der Umsetzung einer Seite bedacht werden sondern auch die Größe der Bilder die auf dem mobilen Endgerät herunter geladen werden müssen. Nun gibt es ja viele Wege die nach Rom führen, bekanntermaßen. Hier möchte ich einen Weg vorstellen der mit einfachsten Mitteln umzusetzen ist und im Prinzip noch nicht mal etwas mit TYPO3 zu tun. Es geht dabei um das PHP Script von adaptive-images.com. Auf der Infografik oben ist zu sehen, was sich damit erzielen lässt.

Adaptive Images in TYPO3. Ein kleiner Workarround für gute Ergebnisse.

Der Einbau dieser Adaptive Images Technik ist denkbar Einfach. Unter dem Downloadlink adaptive-images.com/download.htm die letzte Version des Scripts herunterladen. Das Archiv wird nun entpackt. Die Datei adaptive-image.php wird auf den Server geladen. Die Datei wird direkt im Document Root abgelegt. Danach wird ein Verzeichnis mit dem Namen “ai-cache” in dem die Adaptive Images abgelegt werden im Document Root erstellt.

Im nächsten Schritt muss ein kleines JavaScript in den “Head” Bereich der Seite eingebaut werden. Am besten gleich am Anfang.

 

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

 

Um dieses JavaScript in TYPO3 gleich nach dem Head Tag zu plazieren kannst Du in Deinem Haupt Template im Setup folgenden Code nutzen:

 

page = PAGE
page.headTag (
<head>   <script>document.cookie='resolution='Math.max(screen.width,screen.height)'; path=/';</script>
)

 

 

Mit dem JavaScript wird die Auflösung des Clients für die Auslieferung der Adaptive Images bestimmt.

Auf diese Weise wird der Head Tag von TYPO3 überschrieben und danach sofort das JavaScript eingebunden. Als letzte Maßnahme muss noch die .htaccess Datei im Document Root angepasst werden. Dieser Code muss eingebunden werden:

 

# Adaptive Images -----------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new 
RewriteCond %{REQUEST_URI} !typo3
 # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above 
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
 # END Adaptive Images ------------------------------------------------------------

 

Wichtig hierbei ist, das dieser Code sehr weit am Anfang der .htaccess Datei steht. Kommt dieser Code zu spät funktioniert das ganze nicht mehr. Am besten also nach

 

# Enable URL rewriting
RewriteEngine On
 # Change this path, if your TYPO3 installation is located in a subdirectory of the website root.
RewriteBase /

 

suchen und direkt danach einfügen.

Konfiguration der Breakpoints für Adaptive Images

Zusätzlich können die Breakpoints nach belieben verändert werden. Das Script ist bereits vorkonfiguriert. In der Datei adaptive-image.php finden sich ab Zeile 15 ein paar Konfigurationsparameter:

 


 

 

$resolutions   = array(1382, 992, 768, 480); // Auflösung und Breakpoints
$cache_path    = "ai-cache"; // Verzeichnis für Bildercache
$jpg_quality   = 75; // Bildqualität 
$sharpen       = TRUE; // Bilder zusätzlich nach verkleinern nachschärfen lassen
$watch_cache   = TRUE; // überwacht den Cache und erzeugt bei Änderungen am originalen Bild ein neues
$browser_cache = 60*60*24*7; // Wie lange die Bilder im Browsercache liegen sollen

 

 

Nachdem das ganze umgesetzt wurde kannst Du mit einem Tablet oder einem Smartphone die Webseite Besuchen. Du wirst sehen dass im ai-cache Verzeichnis neue Unterverzeichnisse mit den entsprechenden Breakpoints angelegt werden. Darin wird die normale Ordnerstruktur der Dateien wie in TYPO3 selbst erzeugt, und darin liegen die verkleinerten Bilddaten.

Wie funktioniert das nun genau?

Der Ablauf für die Generierung von Adaptive Images ist relativ simpel:

  1. Beim laden der Seite wird die aktuelle Auflösung mit dem JavaScript in ein Cookie gespeichert
  2. Der Browser stellt für jedes Bild dass im Quelltext vorkommt eine Anfrage zum laden an den Webserver
  3. Der Webserver checkt die Anfrage gegen das htaccess File und schaut ob es bestimmte Anweisungen für Bildmaterial gibt
  4. Diese gibt es und die Anweisung lautet dass die Anfrage nun an die adaptive-images.php Datei weitergeleitet werden soll
  5. Die PHP Datei prüft nun ob ein Cookie existiert und holt sich da die Auflösung des Browsers heraus
  6. Die nun bekannte Auflösung wird gegen die oben definierten Breakpoints verglichen und der am besten passende Breakpoint wird gewählt
  7. Es wird geprüft ob für diesen Breakpoint bereits eine Grafik im ai-cache Verzeichnis liegt
  8. Wenn nicht, wird zuerst das originale Bild angefordert
  9. Wenn das originale Bild kleiner als die bekannte Bildschirmgröße ist wird es dem Browser gesendet
  10. Wenn das originale Bild größer als die bekannte Bildschirmgröße ist wird es verkleinert und als Kopie im "ai-cache" Verzeichnis abgelegt und dem Browser zugesendet
Zurück zur Liste