Adaptive Images mit Contao


Gepostet von Andreas Nölke am

Da es in letzter Zeit sehr modern ist Responsive Webseiten zu erstellen, rückt natürlich das Datenaufkommen für den Mobilen Benutzer immer mehr in den Vordergrund. Klar werden die Netwerke immer schneller, allerdings sollte man nie vergessen, dass das leider noch die Ausnahmen sind und somit lange Ladezeiten für Webseiten bei Mobilgeräten unerwünscht sind.

Hier kommt das sogenannte Adaptive Images ins Spiel. Natürlich ist Englsich manchmal nicht so leicht zu verstehen, deshalb habe ich hier ein Tutorial für Contao erstellt.

Was genau ist Adaptive Images überhaupt?

Adaptive Images ist nichts anderes wie die Umarbeitung der Bilder auf der Webseite. Das heißt, die Bilder werden genommen, umgearbeitet und an den Browser verschickt. Umarbeiten bedeutet in diesem Fall, dass die Auflösung der Bilder reduziert wird.

Generell braucht man das Adaptive Images in Contao nicht. Der Core nimmt einem in der Regel die meiste Arbeit schon ab. So werden eingefügte Bilder vom Core entsprechend in ihrer Auflösung verkleinert und separat gecached. In den System Einstellungen kann man auch eine maximale Frontend Bildbreite festlegen, ebenso wie eine Upload Breite/Höhe und Dateigröße. So kann man schon die meisten Fälle abfangen ohne zusätzlich Adaptive Images zu verwenden.

Wie wende ich Adaptive Images mit Contao an?

Wofür benötige ich also Adaptive Images? Adaptive Images kann dafür verwendet werden um sämtliche Bilder, welche über CSS oder direkt im HTML Layout engebettet sind zu verkleinern.

Hierfür ist es sehr gut geeignet, da keine Code Änderungen am Core nötig sind. Es müssen lediglich folgende Grundschritte beachtet werden.

Zuerst muss man natürlich Adaptive Images herunterladen. Dies findet ihr auf adaptive-images.com.

Dann die Datei adaptive-images.php in das Root Verzeichnis deiner Contao Installation legen. Also da, wo die index.php liegt. Diese Datei kann natürlich nach belieben angepasst werden. Wenn du nicht genau weißt, was du tust, dann halte dich einfach nur in dem Config Bereich auf.

$resolutions   = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
$cache_path    = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
$jpg_quality   = 75; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen       = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache   = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default);

Im Prinzip ist alles selbsterklärend. Am wichtigsten sind die oberen beiden Zeilen.

$resolutions   = array(1382, 992, 768, 480);

In dieser Zeile gibt man die Bildschirmbreite an, ab welcher das Bild verkleinert werden soll.

$cache_path    = "ai-cache";

Hier das Verzeichnis angeben, in welchem man die Bilder speichern möchte.

Als nächstes steht nun die Frage im Raum: Woher weiß Adaptive Images denn überhaupt, welche Auflösung ich habe?

Dies erfährt Adaptive Images über folgenden Code Snippet:

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>

Dieser muss in den <head> tag eingefügt werden. Das kann im Seiten Layout von Contao erledigt werden oder direkt in der fe_page. Wie man es lieber möchte. Beides funktioniert.

Das Code Snippet erstellt ein Cookie welches ausgelesen wird. Es ist wichtig zu beachten, welche Breite das Snippet im Cookie vermerkt! Es wird die Bildschirm Breite gelesen und nicht die Browser Breite. Das ist in sofern wichtig, da ich ja auf einem 24" Monitor das Bild in hoher Auflösung laden will, selbst wenn mein Browser Fenster klein ist. Denn wenn ich das Vergrößere ist das Bild verpixelt. Klar soweit?

Zuletzt die .htaccess Datei anpassen

Nun würde es schon fast laufen, wäre da nicht die .htaccess Datei. Diese passt ihr ziemlich am Ende an. Sieht dann folgendermaßen aus:

RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# über diese Rewrite Rule einfügen
RewriteRule ^[a-z]{2}/$ index.php [L]
RewriteRule ^([a-z]{2})$ $1/ [R=301,L]

Nun muss noch dafür gesorgt werden, dass Contao das Überschreiben der Bild URLs auch zulässt. Hierzu nach folgender Zeile suchen:

<FilesMatch "\.(htm|php|js|css|htc|png|gif|jpe?g|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">

Hier muss png|gif|jpe?g entfernt werden. Sieht dann so aus:

<FilesMatch "\.(htm|php|js|css|htc|ico|xml|csv|txt|swf|flv|eot|woff|svg|ttf|pdf|gz)$">

Das war's. Nun könnt ihr mit dem Testen beginnen.