Die richtige Bildergröße für den richtigen Screen – Adaptive Images

Einer der größten Vorteile von diversen CMS – Systemen gegenüber händisch programmierten Websiten ist das Bilder-Management. Bei WordPress zum Beispiel werden beim Upload des Bildes automatisch (dem Theme entsprechende) verschiedene Versionen für verschiedene Screensizes erstellt.

Doch es gibt immer noch genügend Websiten die ohne CMS auskommen müssen. Braucht man dann in einer Responsive-Website ein Bild, wird gerne einfach die maximale Größe verwendet. Auf Mobile-Devices wird es jedoch kaum nötig sein 3000 mal 2000 Pixel darzustellen. Es würden also auf Mobile-Devices die großen Bilder geladen werden und dann höchstwahrscheinlich auf ca. 400 mal 270 Pixel runterskaliert werden.

Dies hat natürlich negative Auswirkungen auf die Seiten-Ladezeit und somit (indirekt) auch auf das Ranking bei den Suchmaschinen (Stichwort: OnPage Optimierung).

Adaptive Images

Abhilfe schafft dabei ein PHP-Script (im Zusammenspiel mit einem .htaccess Eintrag) mit dem Namen Adaptive Images.

Funktionsweise

Zu Beginn wird via JS ein Session-Cookie mit der aktuellen Screensize in den Browser-Speicher geschrieben. Das geniale Plugin leitet dann alle Browser-Anfragen nach einem „<img>“ -Tag auf das „adaptive-images.php“ Skript um. Das php-Skript checkt dann die Screensize (vom Cookie) und versucht ein, bereits erstelltes passendes, Bild zu laden. Gibt es noch kein Bild in der passenden Größe wird dieses erstellt und abgespeichert.

Voraussetzungen

Adaptive Images kann auch im Nachhinein auf den meisten Websites installiert werden, einzige Voraussetzungen sind:

  • Apache2 / nginx Webserver
  • PHP 5.x (Tests zu PHP 7.x folgen)
  • GD lib (ist normalerweise Default bei PHP)

Installation

Da der Apache doch noch weiter verbreitet ist und wir nur Apache Webserver zum Testen installiert haben, hier eine kurze Anleitung wie Adaptive Images unter Apache installiert werden kann.

  1. Letzte Version von „Adaptive-Images“ herunterladen (Website / GitHub)
  2. Gibt es aktuell schon eine .htaccess Datei am Server sollten die Inhalte der „Adaptive-Images“ – .htaccess in der aktuellen Datei ergänzt werden. Ansonsten kann die .htaccess-Datei von „Adaptive-Images“ gemeinsam mit „adaptive-images.php“ einfach ins Root-Verzeichniss hochgeladen werden.
  3. Folgendes Script so früh wir nur möglich in den „<head>“ einfügen:
    <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
  4. Danach muss nur noch in der Datei „adaptive-images.php“ die Variable $resolutions an die Responsive-Breakpoints der Website angepasst werden. Im Falle von Bootstrap (v3) würde die Variable so aussehen müssen:
    $resolution = array( 1200, 992, 768, 480, 320);

Das war schon wieder die ganze „Hexerei“, Bilder werden jetzt genau in der passenden Größe an den Browser geliefert. Im diesen Sinne -> fröhliches Schaffen.

Facebook
Google+
http://www.stefan-rammer.at/2016/10/03/die-richtige-bildergroesse-fuer-den-richtigen-screen-adaptive-images/
Twitter
RSS
Follow by Email

Stefan

Webdeveloper, Wordpress, PHP, MYSQL

Schreibe einen Kommentar

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