Ein verpixeltes Bild oder ein verzerrter Lesebereich eines Zeitungsartikels sind unschöne Auffälligkeiten beim Surfen mit dem Smartphone oder Tablet. Denn falsch codierte Bilder können das Lesevergnügen trüben. Damit sich Bilder automatisch an die Eigenschaften des Endgeräts anpassen (responsive image), können Webdesigner und Programmierer einige einfache Befehle hinzufügen. Auch in Javascript und Content Management Systemen stehen passende Funktionen zur Verfügung. 

Flexible Raster und adaptives Design

Websites werden aktuell zu 50% im Responsive Webdesign (kurz: RWD) umgesetzt und es werden monatlich mehr (Quelle: restive.io). Um Inhalte auch auf mobilen Endgeräten optimal daruzustellen, können im Theming zwei verschiedene Ansätze verfolgt werden: das Darstellen über ein flexibles Raster (fluid Grid) oder über das adaptive Design.
Richten sich die Webinhalte an einem flexiblen Raster aus, passen sich die Inhalte flexibel an das Endgerät an. Mit veränderter Breite verändert sich kontinuierlich die Website. Dabei richtet sich das Design nach Prozentangaben, bspw. nimmt eine Fußzeile immer 25% der Bildschirmbreite ein. Vorteil ist, dass alle verschiedenen Gerätegrößen berücksichtigt werden und sich der Inhalt vollständig an das Endgerät anpassen kann. Nachteilig kann sich auswirken, dass das für große Bildschirme optimierte Design in einer verkleinerten Ansicht nicht lesbar ist.

Beim adaptiven Ansatz werden Merkmale anhand der Pixelwerte einer Website angepasst. Für verschiedene Bildschirmbreiten werden fixe Pixelwerte angegeben. Die Informationen zu den entsprechenden Größen werden im Code ausgelesen. Bei diesem Ansatz ist es aufgrund der vielen verschiedenen Endgeräte-Typen auf dem Markt fast unmöglich alle Größen zu berücksichtigen und optimal darzustellen. Im Gegensatz um fluid Design lässt sich das adaptive Design aber mit weniger Zeitaufwand umsetzen.

In den meisten Fällen werden Websites mit einer Mischung aus fluidem und adaptivem Ansatz umgesetzt. Mithilfe des adaptiven Ansatzes können damit Elemente, die auf einem großen Display nebeneinander angezeigt werden auf kleineren Endgeräten untereinander angeordnet sein. Darüber hinaus können Elemente prozentual verkleinert werden und so optimal auf mobilen Endgeräten angezeigt werden.

Für den adaptiven Ansatz benötigt man sogenannte Media Querys / Breakpoints. Standardmäßig werden für verschiedene Bildgrößen fixe Breakpoints anlegt.
Beispiele für Breakpoints : 

  • small = alles kleiner als 640px
  • medium = kleiner als 960px
  • large = kleiner als 1200px
  • xlarge = kleiner als 1440px

Beispiel: So lange das sichtbare Fenster (Viewport) kleiner als 640px ist, greifen alle Answeisungen aus dem Breakpoint small.
Es ist auch möglich die Breakpoints umzuschreiben in "Größer als xx" und "zwischen Wert A und Wert B".

Bilder responsive anlegen

Bilder werden standardmäßig mit wenigen Anweisungen fluid dargestellt, ob Hintergrundbilder oder Textfluss um Bilder.

Bilder an die maximal verfügbare Größe anpassen

img {
  max-width: 100%;
  height: auto;
}

Textumfluss um Bilder

.floated {
  max-width: 100%;
  height: auto;
}

Fluide Hintergrundbilder

Wenn man den Wert für background-size auf „contain“ setzt, werden sowohl Breite als auch Höhe an das Parent-(Eltern) Element angepasst. Beim Wert „cover“ wird immer die komplette zur Verfügung stehende Hintergrundfläche ausgefüllt, was bedeutet das auch Teile des Bildes nicht angezeigt werden.
Diese Variante wird aber von vielen älteren Versionen von Browsern nicht unterstützt.
.class {
  background-image: url(Dateipfad);
  background-position: center center;
  background-size: contain; /* oder cover */
  background-repeat: no-repeat;
}

Ladezeiten und Datenvolumen verringern

Beim Surfen mit mobilen Endgeräten sind Ladezeiten und Datenvolumen wichtige Faktoren, die man im Auge behalten muss. Viele beachten nicht, dass Bilder, die auf einer Seite angezeigt werden, immer in voller Größe geladen werden - folglich steigen die Ladezeiten bedingt durch das hohe Datenvolumen und Websites bauen sich nur noch sehr langsam auf. 
Um diesen Punkt zu verhindern, gibt es verschiedene Möglichkeiten:

JavaScript und PHP

Man verwendet das JavaScript Plugin resize.js. Mit dieser Methode liest man den Useragent aus (enthält Informationen vom Gerät: verwendeter Browser, Betriebssystem, Gerätename usw.) und läuft alle vorhandenen Bilder im DOM (Document Object Modell) durch. Dann werden die POST-Daten für die Bildgrößen an den Server geschickt, diese skaliert und zurück gesendet um dann die Bilder im DOM zu ersetzen bzw. hinzufügen. Mit PHP werden anschließend gecachte Bilder für jede benötigte Bildgröße hinterlegt. Hinterlegte Breakpoints werden nun genutzt um das Bild dem Gerät entsprechenden Breakpoint auszugeben. (Anleitung zu resize.js auf smashingmagazine.com)

Drupal Module Responsive Image, Breakpoint, Crop

Wer Drupal als Content-Management-System verwendet, hat ebenfalls verschiedene Möglichkeiten Ladezeiten zu verringern und Bilder responsive zu gestalten.
Es besteht die Möglichkeit ein eigenes Feld im Inhaltstyp für Mobile Bilder bereitzustellen. Hier kann der Redakteur sein Bild selber bestimmen und hat sogar die die Möglichkeit komplett andere Bilder im mobilen Endgeräten anzeigen zu lassen. Allerdings müssen hier die Bilder auch mit CSS ein- und ausgeblendet werden, was die Ladezeit deutlich vergrößert.

Drupal 7

In Drupal 7 kann zudem das Modul „Responsive Images and Styles“ genutzt werden. Für die konfigurierten Breakpoints im Breakpoint-Modul werden die einzelnen Bildstile hinterlegt, die dann je nach Bildschirmbreite vom Server geladen werden. Hiefür verwendet das Modul das HTML5 Element Picture.

Drupal 8

In Drupal 8 sind die Module Responsive Image, Breakpoint und Crop im Core bereits vorhanden.
b-connect hat unter Drupal 8 das Modul "Crop API" getestet. Ein kleines Tutorial zu Crop API und Responsiv Images werden wir in nächster Zeit auf unserem Blog online stellen.
Mit Crop API kann man Bilder, die im Desktop den Landscape-Ansichtsmodus haben, auf dem mobilen Endgeräte zum Portrait-Ansichtsmodus wechseln lassen. Das ist praktisch, denn hier kann der Redakteur den Ausschnitt selber bestimmen statt das Seitenverhältnis des Bildes automatischen anpassen zu lassen. Denn beim automatischen Anpassen geht viel Inhalt verloren. Mit Crop API wird gewährleistet, dass das wichtigste angezeigt.