Schon mal von „Adaptive Images“ gehört? Nein! Ich auch nicht. Habe mich dann erst einmal darüber Informiert und war sofort hell auf begeistert. Dies ist eine sehr einfache Möglichkeit, Bilder für jedes Endgerät, automatisch erstellen zulassen. Mein erster Test war auch sehr schnell erfolgreich. Diese AI Funktion habe ich dann später auch hier auf der JUG-FN eingebaut!

Nun habe ich mich dazu entschlossen diesen Beitrag für andere User, mit allen wichtigen Informationen, was ich dazu gefunden habe, zusammenzufassen. Also viel Spaß damit.

JUG FN - adaptive Images

Responsives Webdesign
Dies ist eine tolle Möglichkeit, Layout und Design auf allen mobilen Endgeräten und Bildschirmgrößen anzupassen. Dabei wird aber immer nur eine Größe (z.B. 2.688 x 1.520 Pixel) des Bildes für alle Endgeräte benutzt. Ist dieses nicht optimiert, kann die Datei sehr schnell einige MB groß werden.

Für Desktop Anwender ist das in der Regel, in der heutigen Zeit mit DSL kein großes Problem mehr. Aber was ist mit den mobilen Endgeräten?

Denn auf diesen existiert auch immer das gleiche Bild in voller Auflösung und mit derselben Dateigröße. Dieses wird dann ja nur skaliert.

Vor allem bei Handys spielt das optimierte Bild eine ganz wichtige Rolle. Hier gibt es im allgemeinen ein bestimmtes Datenvolumen (Kosten) und langsamere Internetverbindungen (Geschwindigkeit). Nicht zuletzt darfst du auch die OnPage Optimierung (SEO) nicht außer Acht lassen.

Was heiß das jetzt?
Muss ich jetzt immer für jedes Endgerät ein Bild erstellen und optimieren? Das wären ja dann jeweils mindestens vier Bilder pro Bild oder mehr. Eins für Desktop Large, eins für Desktop Normal, eins fürs Tablet und eins für das Handy!

Bei sehr wenigen Bildern würde das ja noch gehen, aber was ist, wenn ich sehr viele Bilder habe? Ist der ganze Aufwand zum Nutzen gerechtfertigt? Es muss ja bestimmter Programmiercode eingefügt werden und die Bilder müssen erstellt und optimiert werden! Das möchte ich nicht und ist mir alles zu aufwendig!

Die Lösung
Musst du auch nicht, denn es gibt dafür eine ganz einfache, geniale, kostenlose und automatische Lösung: Adaptive Images.

Meiner Meinung nach ist dies vor allem für Anwender/Autoren, welche immer nur ein Bild ohne Optimierung, z.B. von einem Handy, in ihren Beitrag hochladen. Aber auch für Webmaster welche in der Regel die Bilder optimieren ist das eine einfache, schnelle und gute Lösung.

Adaptive Images
Das „Adaptive Images“ arbeitet komplett serverseitig, mit JavaScript und einer kleinen PHP Datei. Das PHP Skript erstellt automatisch jeweils ein extra optimiertes Bild für das Endgerät, in der genauen Pixel-Breite und -Höhe des Bildschirmes. Das Ganze kann zu jeder Zeit, auch nachträglich, noch eingebaut werden!

Wenn du mehr über das Technische erfahren möchtest, informiere dich bitte hier auf der originalen Englischen Seite „How it works“ von Adaptive Images.

Hier siehst Du meine Beispiele mit den verschiedenen Formaten und Dateigrößen, welche je nach Viewpoint, immer automatisch angepasst werden:

JUG FN - adaptive Images, Vergleich

Somit musst du selber nur ein Bild (jpg, max. 96 DPI, 24 Biettiefe, RGB) einstellen, den Rest macht der Server! Ich finde das genial!
Das original Bild ist hier "b001, b002, b003", die weiteren Auflösungen sind "blau" markiert, je nach Viewpoint.

Was möchtest du noch mehr? Eine Anleitung? Hier, bitte schön…

Installation und Anleitung
So kannst Du in wenigen Minuten Adaptive Images, auf einem Apache Server, ganz schnell installieren:

1. Die aktuelle „Adaptive-Images“ Version auf der originalen Website herunterladen und entpacken, wir benötigen nur die „adaptive-images.php“ Datei.

2. Die „ .htaccess “ Datei erstellen (den Punkt beachten!)
Diese findest Du in Deinem Root Verzeichnis per FTP. Bitte vorher ein Backup der Datei erstellen und NICHT ÜBERSCHREIBEN, auch die Schreibrechte beachten! Anschließend folgenden Code kopieren und am Ende in die Datei einfügen und hochladen:


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} !ignore-this-directory
# RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too

RewriteCond %{REQUEST_URI} !assets

# don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache

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


3. "ai-cache" Ordner anlegen
Nun legst du in deinem Root Verzeichnis einen leeren Ordner "ai-cache" mit den Rechten 755 an. Hier werden die verkleinerten Bilder abgespeichert.

4. Die „adaptive-images.php“ anpassen
Auf der AI Seite unter Customising findest Du eine ausführliche Erklärung dazu (bitte dazu etwas herunter scrollen).

Wichtig sind die „Resolutions“ für die gängigsten Viewpoints, die „JPG Quality“ für die Dateigröße und vielleicht der „Browser Cache“, welcher anzupassen sind.
Anschließend die geänderte „adaptive-images.php“ Datei in das Root Verzeichnis Deiner Seite per FTP hochladen.

Weitere Viewpoint-Möglichkeiten, welche Du (unbegrenzt!?) anpassen kannst sind zum Beispiel für

Gantry 5: 1200,960,768,480
BT 3: 1500,1200,992,768,480,320
BT 4: 1200,992,768,576
Uikit: 1220,960,768,480

adaptive Images conig


5. Dann noch folgendes Skript in den „<head>“ Bereich einfügen:


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


Das kann über ein Override, über Gantry 5 ( unter Erweiterungen > Ganntry 5 Themes > Page Settings > Atoms > Custom CSS / JS) gemacht werden. Plugins findest Du sonst auch im JED.


6. Das war es. Du kannst es jetzt testen.


Mögliche Probleme
Es kann sein, das die Bilder nicht immer sofort erstellt werden, je nachdem was deine „.htaccess“ sonst noch alles so beinhaltet.

Wenn der User kein JavaScript aktiviert hat (ohne JS geht es heute kaum noch!), ist das halb so schlimm. Er kann trotzdem ganz normal deine Webseite anschauen, nur sind dann die Bilder für ihn nicht optimiert! Damit die optimierten neuen Bilder auch generiert werden, muss Deine Seiten erst mit dem entsprechendem Endgerät besucht werden. Überprüfen kannst Du das im „ai-cache“ Ordner über FTP. Wird das Bild nicht skaliert, solltest Du die DPI Auflösung des Bildes überprüfen. Diese darf höchstens 96 DPI betragen.

Solltest du vielleicht auch einen Internal Server Error 500 haben, empfehle ich dir die Seite von Luca Hammer. Dort beschreibt er ganz genau, was in deinem Code für die „.htaccess“ dann ein wenig geändert werden muss.

Weitere Infos
dazu findest du im Web und auf diversen Webseiten z.B. von Elmastudio, Pixelbar und auf der Hauptseite von Adaptive Images.

Erweiterung
Es gibt noch eine FREE und PRO Joomla! Erweiterung, welche zusätzlich dann auch noch eine weitere Extension benötigt. Ich finde das alles unnötig und möchte es hier nur kurz erwähnen.

Viel Erfolg und Spaß!

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.