Responsive Images mit Drupal

Mit Responsive Images kann man die Ladezeit der Seiten verbessern, in dem Bilder in verschiedenen Größen erzeugt werden, die an die tatsächliche Bildschirm-Auflösung des Clients angepasst sind. Insbesondere, wenn das Design sehr große Bilder verwendet, z. B. in einem Slider, dann empfiehlt sich die Verwendung von Responsive Images um einen guten Wert für den Pagespeed zu erreichen. Zusätzlich können auch hochaufgelöste »Retina-Images« verwendet werden. 

In Drupal 8 sind die notwendigen Module bereits enthalten. Für Drupal 7 kann man diese Funktion mit den Modulen »Breakpoints« und »Picture« erzielen. Bei der Konfiguration in Drupal 7 gibt es ein paar Eigenheiten zu beachten.

Nach der Installation der Module sollten zunächst die Breakpoints definiert werden. Das geht in dem Backend unter Konfiguration » Medien » Breakpoints und in der Info-Datei des Themes. Dort können z. B. die Basis-Breakpoints eingetragen werden:

breakpoints[phone] = (min-width: 0px)
breakpoints[phablet] = (max-width: 660px)
breakpoints[tablet] = (max-width: 1024px)
breakpoints[desktop] = (min-width: 1200px)

In dem Modul Breakpoints können die Vorgaben des Themes importiert werden und weitere Breakpoints hinzugefügt werden. Hier muß auf die richtige Reihenfolge der Points geachtet werden, ansonsten funktioniert die Ausgabe nicht wie gewünscht. Wenn man das Modul Picture in einer Version > 7.2 verwendet, dann müssen die Breakpoints aufsteigend sortiert werden, also beginnend mit der kleinsten Bildschirmgröße. Wird Picture < 7.2 verwendet, dann ist die Reihenfolge absteigend.

Drupal 7 Breakpoints

Sind alle Breakpoints definiert, dann können neue Bild-Stile angelegt werden, die für jeden der Points eine passende Bildgröße erzeugen. Ein vorhandener Bild-Stil kann hier als Vorlage dienen und wird geklont.

Drupal Bild-Stile für Breakpoints

Die neuen Bild-Stile müssen aber noch angepasst werden. Das Modul kann zwar einen vorhandenen Stil klonen, es setzt aber nicht automatisch die richtige Skalierung für die Points. Folglich muß für alle neuen Stile die richtige Größe für die Skalierung eingegeben werden. Unter  Konfiguration » Medien » Bildstile werden nun die neuen Stile aufgelistet.

Bildstile aus Breakpoints

Um die Breakpoints in der Anzeige verwenden zu können, wird das Modul Picture benötigt. Dieses Modul ersetzt das Image-Modul von Drupal. Dafür muß die Anzeige in den Views und den Inhaltstypen umgestellt werden. Das Modul verwendet das relativ neue Picture-Tag, welches noch nicht von allen Browsern unterstützt wird. Deshalb sollte man derzeit die vorhandene Option für ein Fallback auf ein gewöhnliches img-Tag mit einfachem Bild-Stil nutzen.

Drupal Picture Modul Anzeige

Drupal Picture Modul Anzeige

Eventuell müssen die Caches geleert werden, damit die Bilder tatsächlich responsive werden.

Der Modus »Responsive Design« in Safari ist derzeit noch nicht kompatibel, hier wird immer die größte Bild-Version angezeigt. Wird der Modus nicht benutzt und nur das Browserfenster verkleinert, dann wird das korrekte Bild geladen.

Mit den Breakpoints aus diesen Beispiel ergeben sich vier Bildgrößen in einer symbolischen Darstellung.

Demo Desktop

 

Demo Tablet

Demo Phablet

Demo Phone