Kopieren Sie adaptive-images.php und .htaccess
in das Hauptverzeichniss ihres Internetauftritts.
Wenn Sie bereits eine htaccess Datei haben BITTE NICHT ÜBERSCHREIBEN, lesen sie die dafür vorgesehenen Instruktionen.
Erstellen Sie ein Verzeichniss mit dem Namen ai-cache im Hauptverzeichniss
mit Schreibberechtigung (CHMOD 777).
Kopieren Sie folgendes Javascript in den <head> Bereich ihrer Seiten. Das Script MUSS sich im head Bereich befinden damit es ausgeführt wird bevor die gesamte Seite geladen ist und die ersten Bilder vom Server ausgeliefert werden.
<script>document.cookie='resolution='+Math.max(screen.width,
screen.height)+'; path=/';</script>Das wars. Sie sind fertig
ANMERKUNG: Die ai-cookie.php Datei wird normalerweise nicht
benötigt. Nur beim Einsatz der Alternativen Methode
zum Feststellen der Displaygrösse wird sie benötigt ansonsten kann sie gelöscht werden.
Sichern Sie bitte diese Datei bevor Sie Änderungen daran vornehmen.
Öffnen Sie bitte ihre bestehende .htaccess Datei und editieren Sie den Inhalt. Suchen Sie nach einem Abschnitt suchen der so beginnt:
<IfModule mod_rewrite.c>
Sollten Sie ihn gefunden haben kopieren Sie folgenden Code in den Bereich:
# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new
line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory
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 -------------------------------------------------------------------------------Gibt es keinen solchen Abschnitt in ihrer Datei kopieren Sie stattdesen folgenden Code in die Datei:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a
new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory
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 -------------------------------------------------------------------------------
</IfModule>Anweisungen sind in der Datei als Kommentare enthalten (alle Zeilen die mit # beginnen sind Kommentare und werden nicht ausgeführt)
Folgen Sie den Anweisungen im Code um Verzeichnisse die nicht mit Adaptive-Images benutzt werden sollen einzutragen.
Sie können die PHP-Datei öffnen und die Einstellungen im CONFIG Bereich ändern. Die Standardwerte sehen so aus:
/* CONFIG ----------------------------------------------------------------------------------------------------------- */
$resolutions = array(1382,992,768,480,320); // Die Auflösungsschritte für die Bilder erzeugt werden (Bildschirmbreite in Pixel)
$cache_path = "ai-cache"; // Wo die verkleinerten Bilder gespeichert werden. Der Ordner muss beschreibbar sein.
$jpg_quality = 80; // Die Qualität der erzeugten JPGs 0 bis 100
$sharpen = TRUE; // Verkleinerte Bilder verlieren an Schärfe, bei TRUE werden die Bilder geschärft
$watch_cache = TRUE; // stellt sicher das neu hochgeladene Bilder neu verkleinert werden
$browser_cache = 60*60*24*7; // Die Zeit in Sekunden für den BROWSER cache (Standard 7 Tage)
$mobile_first = TRUE; // Ist kein Cookie vorhanden wird zuerst die mobile Version gesendet (wenn FALSE, wird das grösste Bild gesendet)
/* END CONFIG ----------------------------------------------------------------------------------------------------------
------------------------ Verändern Sie nichts nach dieser Zeile wenn Sie nicht wissen was Sie tun -------------------------
--------------------------------------------------------------------------------------------------------------------- */$resolutions sind die Bildschirmauflösungen mit denen gearbeitet wird.
Als Standard werden verkleinerte Bilder für grosse Bildschirme, normale Bildschirme,
Tablets, Smartphones, und Handys gespeichert.
Im allgemeinen, wenn Sie die CSS Methode nutzen, werden diese Auflösungen dieselben wie in den 'media queries' sein.
$cache_path Der Pfad in den die Bilder zwischengespeichert werden.
Er kann beliebig geändert werden. Der Pfad wird hier eingetragen und es muss
sichergestellt sein das er auf dem Server existiert.
$sharpen Die bilder werden nach dem Verkleinern geschärft.
Normal funktioniert das gut sollte ihr Server sehr sehr ausgelastet sein kann es hier abgeschaltet werdn. .
$watch_cache Bei Performanceproblemen ihres Servers kann diese Option abgeschaltet werden.
Sollten Sie allerdings ihre Quell-Bilder ersetzen müssen Sie den Cache Ordner manuell leeren.
$mobile_first Wenn TRUE und kein cookie ist gesetzt, sendet Adaptive
Images Bilder in der 'mobilen' Auflösung. Wenn FALSE gesetzt ist werden die am
höchten aufgelössten Bilder gesendet.
Eine Schwäche von Adaptive Images ist das JavaScript zum Erkennen der Bildschirmgrösse des Besuchers benötigt wird. Im folgenden wird eine Methode ohne Javascript gezeigt. Diese Methode funktioniert unter Vorbehalt wird allerdings vom Autor nicht empfohlen und nicht unterstützt.
Benötigt kein JavaScript stattdessen aber, muss ÜBER ihrem normalen CSS, folgende Zeilen eingefügt werden:
<style>
@media only screen and (max-device-width: 479px) {
html { background-image:url(ai-cookie.php?maxwidth=479); } }
@media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
html { background-image:url(ai-cookie.php?maxwidth=767); } }
@media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
html { background-image:url(ai-cookie.php?maxwidth=991); } }
@media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
html { background-image:url(ai-cookie.php?maxwidth=1381); } }
@media only screen and (min-device-width: 1382px) {
html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
</style>Wenn Sie diese Mehode verwenden müssen Sie sicherstellen das die verwendeten
Bildschirmauflösungen dennen in Ihrer adaptive-images.php Datei entsprechen,
Sie benötigen zudem die ai-cookie.php Datei im Hauptverzeichniss ihres Internetauftritts.
(ansonsten wird diese Datei nicht benötigt).
Benutzen Sie diese Methode anstatt JS ist es möglich das besucher bei ihrem ersten Besuch ihrer Seiten, die original hoch aufgelössten Bilder gesendet bekommen. ALLE Seiten ihres Auftritts werden wie vorgesehen funktionieren. Das bedeutet allerdings das Sie die Option $mobile_first auf FALSE setzen müssen. Ansonsten werden die meisten ihrer Besucher feststellen das die angezeigten Bilder, bei ihrem ersten Besuch zu klein dargestellt werden. Otherwise, the majority of people who
Der Grund dafür ist die Reihenfolge wie Browser Internetseiten verarbeiten. Als erstes wird das HTML geladen, und in der Reihenfolge wie es geschrieben wurde abgearbeitet. Das eingebettete JavaScript wird sofort ausgeführt und erzeugt das Cookie. Danach werden Bilder in der Reihenfolge ihres Auftrettens geladen. das heisst werden die ersten Bilder vom Server angefordert ist das Cookie mit der Bildschirmgrösse bereits geschrieben.
Das ist bei der CSS Methode nicht unbedingt der Fall. Die CSS Methode setzt eine externe Datei voraus - sie fordert vom Server "background-image" an, welche von der PHP Datei nur benötigt wird um das Cookie zu setzen. Das Problem ist das der Browser beim laden der externen Datein nicht anhält, er arbeitet weiter während er auf die externe datei wartet. Das bedeutet das schon Bilddateien angefordert werden können bevor die PHP Datei abgearbeitet wurde und somit noch kein Cookie gesetzt wurde. Das wiederum heisst, daß wenn $mobile_first TRUE ist die für mobile Geräte verkleinerten Bilder gesendet werden. Aber nur wenn die allererste Seite geladen wird.