Mit „Adaptive Images“ Bilder für responsive Webdesigns optimieren

Die Lösung „Adaptive Images“ wurde von Matt Wilcox entwickelt, um die Dateigröße von Bildern in responsive Webdesigns zu verringern. Mit Hilfe der PHP- und Javascript-Lösung kannst du erreichen, dass von allen Bilder auf deiner Webseite automatisch verschiedene kleinere Bildformate erstellt werden. Diese, in Format und Dateigröße reduzierten Bilder, werden dann genutzt, wenn ein Besucher deiner Webseite z.B. auf einem Smartphone aufruft. Da die Bildschirmgröße eines Smartphone-Displays ja viel geringer ist, müssen so nicht die standardmäßig geladenen, viel zu großen Bilder genutzt werden. Das spart jede Menge Datenmenge und somit Ladezeiten, was besonders auf mobilen Geräten mit langsamen Verbindungen ein großer Vorteil ist.

1. Und so funktioniert’s

Adaptive Images erklaert
Die Grafik illustriert die Bild-Verkleinerung je nach Bildschirmgröße.

„Adaptive Images“ kannst du dir über Github herunterladen (Creative Commons Lizenz) und auf deiner Webseite nutzen. Ich beschreibe kurz wie das funktioniert.

Praktischerweise gibt es sogar eine deutschsprachige Anleitung (instructions_de) im Downloads-Ordner. Mit Hilfe dieser Datei kann eigentlich nichts schiefgehen und das Einbinden des Scripts ist auch überhaupt nicht kompliziert.

2. Die benötigten Dateien integrieren

Als erstes fügst du die Datei adaptive-images.php via FTP-Upload direkt in das Hauptverzeichnis deiner Webseite (also dort, wo sich bei WordPress-Installationen auch die config.php Datei befindet).

3. Den Bilderordner anlegen

Dann erstellst du, ebenfalls in diesem Hauptverzeichnis ein neues Verzeichnis mit dem Namen ai-cache. Diesem gibst du die Schreibrechte 777.

Jetzt schaust du, ob sich in deinem Hauptverzeichnis bereits eine .htaccess Datei befindet. Wenn ja, kannst du dir die Datei auf deinen Computer herunterladen. Am besten du legst jetzt noch eine zusätzliche Sicherheitskopie an, bevor du die .htaccess Datei bearbeitest.

Innerhalb von <ifmodule mod_rewrite.c> und </ifmodule> kopierst du jetzt den Code, der in der in der Dokumentation aufgeführt wird:

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

Wichtig ist hier, dass du den Dateiordner, in dem sich die Bilder für dein Webdesign befinden, ausschließt (bei WordPress-Themes ist dies meist der Ordner „images“).

Ändere änderst du die Zeile:

RewriteCond %{REQUEST_URI} !ignore-this-directory
in:
RewriteCond %{REQUEST_URI} !images

und addierst diese in das Script für die .htaccess Datei.

4. Das JavaScript einbinden

Als letzten Schritt musst du nur noch innerhalb des head-tags deiner Webseite (bei einer WordPress-Webseite also in der header.php Datei) das benötigte JavaScript aufrufen. Dazu kannst du die folgende Codezeile integieren:

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

Fertig ist die Integration von „Adaptive Images“. Wenn deine Webseite jetzt in einer kleinen Bildschirmgröße aufgerufen wird, werden automatisch verkleinerte Bilder in den ai-cache Ordner angelegt. Diese sind dann in der Dateigröße z.B. von 100KB im Original auf ca. 10KB für Smartphones verkleinert. Das tolle ist, dass du selbst ein Bild nur einmal wie gewohnt auf deine Seite einbinden muss, den Rest übernimmt dann Adaptive Images automatisch.

In der Anleitung findest du neben dieser Standardeinbindung übrigens auch noch weitere Optionen (z.B. die Regulierung der Qualität von jpgs oder die Regulierung der Bildschirmauflösungen). Es gibt außerdem noch eine Anleitung für eine alternative Lösung, die ohne JavaScript funktioniert.

Ich hoffe diese kleine Einführung in die wirklich praktische Adaptive Images-Lösung hat dir weitergeholfen. Über Fragen oder weitere Ergänzungen zum Artikel freue ich mich sehr!

47 Kommentare

  1. Hallo Ellen,

    danke für die verständliche und hilfreiche Anleitung. Eine Frage noch: Wie oder wo vergebe ich die Schreibrechte für den Ordner ai-cache?

    Danke und viele Grüße,
    Axel

    • Hallo Alex,

      freut mich, dass du die Anleitung hilfreich findest. Ich nutze immer Filezilla für Uploads. Da kommt man auf die Einstellungsmöglichkeit „Dateiberechtigungen“, wenn man mit der rechten Maustaste auf einen Ordner klickt.

      Viele Grüße,
      Ellen

      • Hallo Ellen,

        danke für den Hinweis. Kannst Du mir noch sagen, was ich mache, wenn sich in meinem Hauptverzeichnis keine .htaccess Datei befindet?

        Danke noch mal und viele Grüße,
        Axel

  2. Danke für den Tipp. Habe das gleich auf meiner Seite eingebaut und es funktioniert prima.

    Rettet die Bandbreite :-)

    • Ja, ich bin auch ziemlich begeistert. Vor allem, da die Lösung so simpel in der Nutzung ist und man die Bilder nicht etwa manuell anpassen muss o.ä. Wir werden Elmastudio auf jeden Fall auch noch nachrüsten :-) Viele Grüße, Ellen

  3. Das ist ein weiterer Schritt in die Richtung Flexibles Webdesign. Momentan arbeite ich an einer Lösung die für alle Webseiten möglich sein wird diese Flexibel (Webseite, Tablet, Mobil) darzustellen.
    Die hier genannte Lösung hilft dabei echt weiter!

  4. hallo ellen,
    das ist ein informativer artikel, denn ich kannte dieses tool vorher nicht. vielen dank!

    ich möchte dich noch darauf hinweisen, dass die lizenz „creative commons“ heißt. :D

    lg jannis

  5. Schöner Artikel und ein nützliches Tool. Zwei Sachen noch:
    >1 # RewriteCond %{REQUEST_URI} !ignore-this-directory
    >2 in:
    >3 # RewriteCond %{REQUEST_URI} !images

    In Zeile 3 die Raute (#) entfernen, ansonsten ist die Zeile ein Kommentar und wird nicht ausgewertet.

    Was WordPress betrifft, würde ich aber anstatt „images“ gleich „themes“ nehmen, da man ansonsten bei einem Wechsel des Themes prüfen muss ob der Name des Verzeichnisses mit den Theme-Grafiken noch stimmt.
    Noch schlauer wäre es vielleicht, explizit das Verzeichnis mit den zu verkleinernden Bildern anzugeben:
    RewriteCond %{REQUEST_URI} upload

    • Hallo Ralf,

      vielen Dank für dein Feedback und deine Hinweise. Das stimmt natürlich, die # hatte ich vergessen zu entfernen. Ich hatte den Code im Artikel letzte Woche auch gleich geupdatet, wollte nur noch einmal kurz bescheid geben.

      Den themes Ordner direkt anzugeben, habe ich auch getestet. Allerdings hatte es dann irgendwie nicht mehr funktioniert. Eine Alternative war für mich, den aktuellen Theme-Ordner Namen statt dem images-Ordner anzugeben.

      Viele Grüße,
      Ellen

  6. Sehr schönes Tool! Gut, dass Ihr mich mit diesem Artikel daran erinnert habt, es endlich einmal in meine Projekte zu implementieren…

  7. Ok, ich glaube ich habe die Einrichtung erfolgreich bewältigt. Allerdings habe ich dennoch den Eindruck, dass es nicht einwandfrei zu funktionieren scheint. Daher meine Frage: Gibt es eine Möglichkeit die Funktionalität zu testen?

    Danke und viele Grüße,
    Axel

    • Hallo Axel,

      nachdem du deine Webseite ein paar mal von einem Smartphone oder Tablet aufgerufen hast, kannst du über FTP kontrollieren, ob bereits Images im Ordner ai-cache angelegt wurden.

      Viele Grüße,
      Ellen

  8. Super Anleitung.
    Ich wundere mich gerade warum bei mir nur ein kleiner Teil in dem Ordner landet. Aber nun viel mir die Lösung ein. Ich habe viele der Fotos bei Google Picasa ausgelagert und nicht in dem internen Ordner. Blöd – denn das wird ja ignoriert (oder gibt es da auch ne Lösung?)

  9. Danke für den Artikel. Getestet und klappt. Ralfs Idee, gleich den gesamten Themes-Ordner auszuschließen funktioniert einwandfrei. Was hattest du den für Probleme damit, Ellen?
    Vielleicht noch ein Hinweis: In der .htaccess kann es durchaus mehrere mod_rewrite-Abschnitte geben, z.B. erzeugt W3 Total Cache seinen eigenen. Wenn die Zeilen für Adaptive Images da rein kopiert werden, kann dies ungeahnte Folgen haben – bei mir ließ sich danach die Website nicht mehr aufrufen. Also dringend darauf achten, wo ihr den Code hin kopiert und unbedingt vorher ’ne Kopie der .htaccess anfertigen.

    CU, Dirk

    • Hallo Dirk,

      vielen Dank für deinen Hinweis bzgl. der .htaccess Datei. Das ist komisch, als ich versucht habe, direkt „themes“ als Ordner anzugeben, wurden keine Bilder in den ai-cache Ordner einsortiert. Aber ich werde das auf jeden Fall noch einmal ausprobieren, da der komplette Ordner ja wirklich praktischer ist und man bei einem Theme-Wechsel nichts mehr anpassen muss.

      Viele Grüße,
      Ellen

  10. Hallo Ellen

    Vielen Dank für diesen informativen Artikel!

    Habe gerade keine Zeit dies zu testen, werde dies aber sobald möglich nachholen.

    Ich hoffe, ich darf dennoch schon zwei kleine Fragen stellen.
    Kann ich das JavaScript auch bedenkenlos ganz zu unterst im Dokument einfügen oder sollte der Aufruf im head erfolgen, damit die Bilder gleich in der richtigen Grösse geladen werden?
    Gibt es die Möglichkeit, die Abstuffungen der Bildgrössen einzustellen, für den Fall, dass man mit media queries arbeitet?

    Vielen Dank und mit lieben Grüssen
    Kerim

  11. Hi,

    danke für den Super Artikel. Einziges Manko wo mir immer die Haare hoch gehen: Ein Ordner auf 777 setzen ist pfui ;)

    Gruß,
    Markus

  12. Hallo Ellen,

    obwohl wir das Script unserer Meinung nach korrekt eingebunden haben, gibt es folgendes Problem:
    > es werden nun keine Bilder mehr angezeigt und der „ai-cache Ordner“ bleibt einfach leer.

    Über nen hilfreichen Tipp würden wir uns ziemlich freuen!

    Gruss
    Joe

    • Ich habe leider das gleiche Problem. Ich kann über die .htaccess meinen „images-ordner“ ausschließen jedoch werden alle anderen Bilder nicht mehr angezeigt. … selbst im WordPress backend.

  13. Danke für die Erklärung, leider bekomme ich immer einen „Internal Server Error“ wenn das .htaccess Statement einsetze.

    Bin für jeden Tip dankbar!

    • Hallo Bento, ich hatte das selbe Problem nachdem ich den Code in den bestehenden Abschnitt meiner .htaccess eingebunden hatte.

      Folgende Lösung schaffte Abhilfe: anstatt den Code in den bestehenden Abschnitt von WordPress zu kopieren, einfach einen zusätzlichen oberhalb von # BEGIN WordPress einfügen – sieht dann in der .htaccess so aus:

      # ADAPTIVE IMAGES

      RewriteEngine On
      # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
      # RewriteCond %{REQUEST_URI} !images
      RewriteCond %{REQUEST_URI} !assets
      RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

      # END ADAPTIVE IMAGES

      # BEGIN WordPress

      RewriteEngine On
      …..

      Gruß, Karin

  14. Vielen Dank für diesen hilfreichen Beitrag! Adaptive Images kann ich in meinem nächsten Projekt gut gebrauchen.

  15. danke für die hilfreiche anleitung!

    ich glaube eine kleine mißverständnisquelle ist hier:

    ###
    Ändere änderst du die Zeile:
    RewriteCond %{REQUEST_URI} !ignore-this-directory
    in:
    RewriteCond %{REQUEST_URI} !images
    ###

    abgesehen von der interessanten verbkonstruktion von _ändern_ ;)
    ist wohl die zeile
    RewriteCond %{REQUEST_URI} !assets
    gemeint, die geändert werden soll.

  16. Stephan Claus 7. März 2012

    Hallo, ich wollte mal in die Runde fragen: hat jemand adaptive images auf einer multiblog installation laufen? (mit subdir Installation)

    Ich habe die Anleitung oben befolgt und habe es mit !images, mit !themes probiert, ich habe es auch einmal ganz weggelassen, einfach um zu sehen, ob es ueberhaupt bilder anlegt – leider nichts passiert…

    hat jemand einen Tipp fuer mich, worauf ich bei einer Multisiteinstallation noch achten muss?

    mfg
    stephan

    • Hy Stephan,
      habe dasselbe Problem auch mit einer Multisite.
      Hast du inzwischen eine Lösung gefunden?

  17. Hallo allerseits,

    erstens mal danke für die se tolle Anleitung.

    Allerdings habe ich ein kleines Problem.

    Ich benutze Joomla für meine Webseiten und da ist sowohl im Template als auch in der Joomla Installation ein Ordner namens „images“.

    Momentan nimmt das Script nur der Hintergrundgrafik meines Headers (was ich leicht komisch finde, denn ich habe noch keinen Ordner ausgeschlossen und es sind reichlich Bilder in meine Artikeln).

    Natürlich kann ich meinem Template den namen ändern in z.B. „bilder“ oder „grafiken“.

    Aber muss ich den relativen Pfad zu dem Ordner angeben oder reicht es einfach den Namen des Ordners anzugeben?

    Ich bedanke mich im Voraus für die Hilfe :)

    Viele Grüße aus Berlin,

    Rob

  18. Hm… bei mir funktioniert das nicht.

    Ich bekomme weder eine Fehlermeldung noch liegen Bilder in meinem ai-cache-Ordner.
    Irgendjemand eine Idee, wieso das so ist?

  19. Hallo, ich habe Nilmini mit Adaptive Images optimiert. Jetzt habe ich das Problem, dass mein Hintergrundbild nicht mehr zu sehen ist, weil dieses ja in den upload Ordner landet. Habe schon ein bisschen probiert, aber nichts funktioniert. Wie kann ich dieses problem lösen?

  20. Geht das genau so ^^^ wenn ich es auf ein Content Management System anwende (z.B. WordPress)? Oder gibt es hierfür Plugins?

  21. Hey Ellen!
    Danke für den tollen Artikel, bei weitem das beste und einfachste Tutorial zu diesem Thema!
    @HD-Valentin Auf wordpress funktioniert es nach diesem Tutorial perfekt, es gab mal ein Plugin wp-resolutions, dass allerdings umständlicher war und von wordpress aus dem Plugin-Verzeichnis entfernt wurde. Auf Github gibt es es noch, allerdings ist Ellens Methode besser und kontrollierbarer.

  22. Hey Ellen,

    danke für die Anleitung!

    Hast du schonmal daran gedacht header.php mit in die Themes mit einzubauen?

    Denn ich würde doch vermuten, dass bei einem WordPress-Update die manuellen Änderungen in der header.php überschrieben werden?

    Viele Grüße,

    Kai

    • *Hast du schonmal daran gedacht Adaptive Images mit in die Themes mit einzubauen?

      Da hab ich wohl nicht richtig kopiert…

  23. Hallo Ellen,

    danke für die Anleitung!

    Da ich in der Fotografie Metier blogge, ist adaptive images für mich eine große Erleichterung. Mein nächstes Ziel ist es dann auf responsive umzustellen.

    Danke & guten Rutsch ; Gruss Baba

  24. Hi Ellen,

    Danke für die sehr verständliche und anschauliche Erklärung! Ich habe nach genau so einer kontrollierbaren und leicht umsetzbaren Methode gesucht!

    Gruß,
    Sascha

  25. Hallo Ellen,
    vielen herzlichen Dank für den Artikel!

    Bei manchen Content Management Systemen werden Bilder standardmäßig im mod_rewrite ausgeschlossen. Bei Contao ist mit das neulich mal aufgefallen und ich hatte mich gewundert, warum keine Bilder dynamisch erzeugt wurden. In meinem Fall musste ich lediglich folgende Zeile in der .htaccess anpassen:

    RewriteEngine Off

    ändern in

    RewriteEngine Off

    Evtl. hat jemand das gleiche Problem und kommt mit diesem Tipp weiter.

    Grüße,
    Chris

  26. Hallo Ellen, danke für diesen Artikel.
    Ich teste Adaptive Images und habe bemerkt, dass der Webspace 1und1.de ein Problem mit der .htaccess Datei hat. Wenn ich hingegen zum Testen die komplette Seite auf bplaced.net hochlade, funktioniert alles einwandfrei. Man muss nur die Zeile Options +FollowSymlinks mit Raute auskommentieren. Es wird der ai-cache Ordner gebildet und die verschiedenen Unterordner. Eine tolle Technologie, bis auf die Zugriffsrechte auf die .htaccess…..
    1und1.de hat leider noch keine Antwort auf das Problem. Wenn jemand eine hat, freue ich mich darüber zu lesen.
    Katja grüßt

    • Hallo Katja,

      falls Dein Problem bei 1und1 noch aktuell ist, dann probier folgendes: Füg´ die Definition des Basisverzeichnisses für die Umleitungsbefehle in die .htaccess-Datei ein: „RewriteBase /“, gleich nach “ RewriteEngine On“. Bei mir war dann das Problem mit 1und1 behoben. Viel Erfolg!
      Grüße Manfred

      Options +FollowSymlinks
      RewriteEngine On
      RewriteBase /
      RewriteCond %{REQUEST_URI} !ai-cache
      RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

  27. Das Adaptive-Images“-Projekt ist wirklich cool. Habe eine angepasste Version dazu entwickelt, welche ich „Customize-Images“ nenne. Der Unterschied ist, dass es nicht auf Cookies und Bildschirmgrößen reagiert, sondern selbst-definierte Bildgrößen rendern kann.
    Über die Bild-URL können Höhe- und Breite-Angaben sowie die Möglichkeit das Bild zu skalieren, verzerren oder zu schneiden definiert werden.
    Würde mich freuen, wenn der ein oder andere mir Feedback zu dem Projekt gibt.
    GitHub: https://github.com/DarioDomiDE/Customize-Images

  28. Hallo Ellen,

    danke für diese super Anleitung. Ich habe noch eine Grundsätzliche Verständnisfrage. Vielleicht kannst du mir da behilflich sein. Bevor ich Adaptive Images auf meinen Seiten einbaue, wollte ich direkt auf der Herstellerseite „http://adaptive-images.com“ im Abschnitt „Example in action“ das Bild testen. Dazu bin ich mit meinem Smartphone 3G-Geschwindigkeit auf adaptive-images.com gegangen und habe das Bild auf dem Smartphone gespeichert. Wenn ich mir dann die Auflösung des Bilder anschaue beträgt sie immer noch 1900 x 1069. Wenn ich mir unter Safari Entwicklertool – Netzwerkmodul die geladenen Dateien anschaue, stelle ich ausserdem fest, dass eine zweite kleinere Version des Bildes geladen wird.
    Das erfüllt nicht wirklich meine Erwartung. Wenn ich es richtig verstanden haben, soll die Methode auch Traffic sparen und nicht vergrößern?

    Besten Gruß
    Stan

  29. hallo zusammen,

    baue zur zeit eine seite mit einem skeleton framework auf. das heißt ich habe in der desktop version bilder in 3 spalten (jeweils 300px). bei geringerer auflösung springt das layout von drei spalten auf eine spalte um, was zur folge hat, das die bilder unter bestimmten auflösungskonfigurationen (480px bis 767px) größer angezeigt werden, nämlich mit 420px. habt ihr eine lösung, wie man diese besonderheit mit adaptive images umsetzen könnte?

    ich brauch also eigentlich nur 300px bilder außer in einer konfiguration 420px.
    weiterhin habe ich das problem, dass die bilder mit einem klick vergrößert werden sollen. ich möchte also die vorschaubilder automatisch auf 300px skaliert haben und bei klick das vollbild laden. das vollbild wird durch ai allerdings auch runterskaliert. gibt es da einen trick?

    danke schonmal für eure antworten
    lg, daniel

  30. Hallo !
    In Schritt 3 steht:
    Ändere änderst du die Zeile:

    Quelltext anzeigenDrucken?
    1
    RewriteCond %{REQUEST_URI} !ignore-this-directory
    2
    in:
    3
    RewriteCond %{REQUEST_URI} !images
    und addierst diese in das Script für die .htaccess Datei.

    Das hört sich irgendwie komig an …. und ist doch etwas unverständlich… oder geht es nur mir so ?

    Trotzdem danke für den Artikel … habe es versuch so zu machen …. aber leider keinen erfolg gehabt.

  31. Hi Ellen,

    vielen Dank für dein Tutorial. Ich habe eine Frage zum htaccess-Zeile:

    RewriteCond %{REQUEST_URI} !images

    Uploads von Medien (Bilder, Video, Audio) werden bei mir standardmäßig nicht in einen „images“-Ordner gelegt, sondern in den Ordner /wp-content/uploads/ geladen. Bedeutet das, dass ich deshalb

    RewriteCond %{REQUEST_URI} !uploads

    angeben muss? Zweite Frage: Beziehen sich die Änderungen von Adaptive Images nur auf neue Bilderuploads oder auch auf den vorhandenen Bestand an Bildern?

    Viele Grüße
    Nick

  32. Hallo,
    liegt hier nicht ein Missverstädnis vor?

    # 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

    Das heisst doch, dass alle Ordner, die nicht von Adaptive-Images angerührt werden sollen hier aufgelistet werden müssen und Ordner, in denen Bilder liegen die geresized werden sollen, dürfen hier nicht (!) aufgelistet werden.

    Oder habe ich etwas falsch verstanden?

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *