Direkt zum Inhalt

Responsive Bilder in Drupal 8

Drupal 8 Repsonsive Image mit srcset oder HTML picture-Element

Für ein responsives Design und gleichzeitig optimierte Ladezeiten der Webseite hat Drupal 8 responsive Bildstile an Bord. Die Optionen sind das img-Tag mit srcset- und sizes-Attribut oder das HTML-picture-Tag.

Die responsiven Bildstile richten sich an Bilder, die über den Feldtyp Bild eines Inhaltstyps geladen werden.

Bilder, die in einem Inhaltstyp wie Produkte, Events oder Workshops über ein Image Field geladen werden, bringen mehr Kontrolle über das Layout der Seite. Hier reguliert der Webdesigner oder Administrator die Auflösung und das Seitenverhältnis über die Bildstile (unter Konfiguration / Bildstile) und dirigiert Produktbilder oder Bilder für die Header-Slideshow für ein konsistentes Erscheinungsbild.

Responsive Image-Modul aktivieren

Neben dem Breakpoint-Modul, das in Drupal 8 schon bei der Installation automatisch aktiviert ist, muss noch das Responsive Image-Modul aktiviert werden. Damit erscheint in Konfiguration / Medien der Eintrag Responsive Bildstile verwalten.

Unter Konfiguration / Bildstile liegen vorbereitete Einstellungen für Bildgrößen, die nach eigenen Anforderungen ergänzt werden:

Groß (480x480)	
Max 325x325	
Max 650x650	
Max 1300x1300	
Max 2600x2600	
Mittel (220x220)	
Vorschaubild (100x100)

srcset oder picture-Element?

Soll nur die Pixel-Auflösung des Bildes bei unterschiedlichen Viewport-Größen und -Auflösungen geändert werden, reicht schon ein img-Tag mit srcset. In den meisten Fällen wird das die beste Wahl sein – auf jeden Fall die einfachste Variante.

Wenn der Ausschnitt bzw. das Seitenverhältnis geändert werden soll, ist das HTML-picture-Element angebracht.

Mit srcset entscheidet der Browser, welches Bild auf die Webseite gesetzt wird, während das HTML-picture-Element dem Browser per Media Query explizit sagt, welches Bild wo und wann zu setzen ist.

srcset (alle Bilder im selben Seitenverhältnis)
Mit dem srcset-Attribut sucht sich der Browser aus einem Satz von Bildern das am besten passende Bild für das Platzangebot im Layout der Seite.
picture (unterschiedliche Seitenverhältnisse und Auflösungen)
Das picture-Element liefert ein passendes Bild an den Browser des Benutzers, je nach Auflösung des Monitors, der Größe des Browserfensters und Ausrichtung des Geräts (Landscape oder Portrait).

Responsive Bildstile für srcset einrichten

Drupal zeigt zwei Einträge:

img srcset und sizes mit Drupal 8

Sowohl unter Narrow als auch unter Wide in der Breakpoint-Gruppe Responsive Image gibt es jeweils nur eine Option, die aber beide gleich mehrere Breakpoints vereinbaren. Wenn Bilder je nach Größe und Auflösung des Viewports sowie dem Platzangebot des Layouts geladen, aber immer im selben Seitenverhältnis geladen werden, reicht ein img-Tag mit einer Kombination aus sizes und srcset.

Das sizes-Attribut erlaubt eine explizite Vorgabe der Bildgrößen anhand von Media-Bedingungen.

<img 
   srcset="
      …/max_325x325/public/2017-11/item1.jpg 325w, 
      …/max_650x650/public/2017-11/item1.jpg 650w, 
      …/max_1300x1300/public/2017-11/item1.jpg 720w" 
   sizes="
      (min-width: 1290px) 325px, 
      (min-width: 851px) 25vw, 
      (min-width: 560px) 50vw, 
      100vw" 
   src="…/max_325x325/public/2017-11/item1.jpg?" 
   alt="img mit srcset und sizes, narrow aus der Voreinstellung von Drupal 8">

Die Breite im sizes-Attribut kann in em, rem, pixel und vw (Viewport-Breite) eingetragen werden, nicht aber in %.

Die Größenangabe w im srcset-Attribut steht für width und gibt die Breite des Bildes an. item1.jpg 650w steht also für eine Bilddatei item1.jpg mit 650px Breite. Wenn die w-Version mit der Breite des Bildes benutzt wird, können wir zusätzlich das sizes-Attribut einsetzen.

Quelle: img srcset – Alternative Bildgrößen

Der Browser holt was er braucht

Die Browser nutzen den ersten Eintrag, bei dem die Bedingung zutrifft und verwerfen die übrigen Einträge. Per Vorgabe von Drupal sind die Bedingungen

(min-width: 1290px) 325px, 
(min-width: 851px) 25vw, 
(min-width: 560px) 50vw, 
100vw // Voreinstellung
img mit srcset und sizes, narrow aus der Voreinstellung von Drupal 8
 
 
  • min-width: 1290px: Bildgröße 325px
  • min-width: 851px: Bildgröße 325px, ~25% der Größe des Viewports
  • min-width: 560px: Bildgröße 325px, ~50% der Größe des Viewports
  • Wenn keine dieser drei Bedingungen zutrifft: 100% der Größe des Viewports

Eine etwas verwirrende Vorgabe (als wären responsive Bilder nicht schon verwirrend genug), denn in dieser Konstellation wird der Browser fast immer das Bild mit 325px Breite wählen. Da Drupal die individuellen Bildgrößen erst bei der ersten Anforderung eines Browsers erzeugt, entsteht allerdings dennoch keine überflüssige Bilderflut.

Formateinstellung Responsive Image

Sobald das Responsive Image-Modul aktiviert ist, zeigt Drupal bei Bildfeldern (Struktur / Inhaltstypen / Felder verwalten) unter Anzeige verwalten neben Bild und URL to image auch das Format Responsive Image Style an.

Von der einfachen Einstellung Bild zu responsive image wechseln und ganz rechts den jeweiligen Stil aus den responsiven Bildstilen aussuchen. Mit nur kleinen Variationen des mitgelieferten Stils WIDE legt Drupal 8 ein img-Tag mit sizes und srcset an und erzeugt die Bilder in den Verzeichnissen sites/default/files/styles/BEZEICHNUNG DES BILDSTILS

<img 
   srcset="
      …/max_325x325/public/2017-11/mockup.jpg 325w, 
      …/max_650x650/public/2017-11/mockup.jpg 650w, 
      …/max_1300x1300/public/2017-11/mockup.jpg 1300w, 
      …/max_2600x2600/public/2017-11/mockup.jpg 1960w" 
   sizes="
      (min-width: 1290px) 1290px, 
      100vw" 
   src="…/max_325x325/public/2017-11/mockup.jpg" 
   alt="Monitor ">
Originalgröße: 1960px
 

Das src-Attribut enthält das Fallback für Browser, die srcset und sizes nicht unterstützen.

Einfache Lösungen

Die einfachste Variante für sizes ist sizes="100vw": Nimm die Breite des Browserfensters aka Viewports. Wenn das Bild aber im Layout nicht die volle Breite des Viewports einnimmt, kann es eingeschränkt werden:

sizes="(min-width: 1290px) 70vw, 100vw" 

Wenn der Viewport mindestens 1290px breit ist, lade das Bild, das am besten in 70% der Viewport-Breite passt. Bei kleineren Monitoren wähle das Bild, das die volle Viewport-Breite am besten ausfüllt.

Responsive mit Picture-Element

Wollen wir den unterschiedlichen Ausrichtungen der mobilen Geräte – Portrait oder Landscape – angepasste Seitenverhältnisse und vielleicht auch noch Retina-Auflösung zukommen lassen, brauchen wir ein HTML-Picture-Element.

Dafür nehme ich einen neuen Responsive Image Style. Die Breakpoints für das picture-Element liest Drupal aus der breakpoint.yml des Themes. Z.B.

madagaskar.portrait:
  label: portrait
  mediaQuery: 'all and (min-width: 300px) and (orientation: portrait)'
  weight: 1
  multipliers:
    - 2x
madagaskar.landscape:
  label: landscape
  mediaQuery: 'all and (min-width: 300px) and (orientation: landscape)'
  weight: 0
  multipliers:
    - 2x
madagaskar.wide:
  label: wide
  mediaQuery: 'all and (min-width: 680px)'
  weight: 2
  multipliers:
    - 1x
madagaskar.large:
  label: large
  mediaQuery: 'all and (min-width: 1260px)'
  weight: 3
  multipliers:
    - 1x

Der Bildstil für rhein.narrow ist Skalieren und Zuschneiden und schneidet das Bild auf ein quadratisches Format.

Unter Responsiven Bildstil Hero Art bearbeiten die Breakpoint-Gruppe des Themes auswählen, unter den Breakpoints jeweils Einen einzelnen Bildstil auswählen und dazu die passende Bilddarstellung.

Drupal 8 responsive image mit picture element
<picture>
   <!--[if IE 9]><video style="display: none;"><![endif]-->
   <source srcset="
   	…max_1680x1680/public/2017-11/konstruktion.jpg 1x" media="all and (min-width: 1260px)" type="image/jpeg">
   <source srcset="
   	…/max_1300x1300/public/2017-11/konstruktion.jpg 1x" media="all and (min-width: 680px)" type="image/jpeg">
   <source srcset="
   	…/quad_mobile_320x320/public/2017-11/konstruktion.jpg 1x, 
   	…/quad_mobile_740x740/public/2017-11/konstruktion.jpg 2x" media="all and (min-width: 300px) and (orientation: portrait)" type="image/jpeg">
   <source srcset="
   	…/max_650x650/public/2017-11/konstruktion.jpg 1x, 
   	…/max_980x980/public/2017-11/konstruktion.jpg 2x" media="all and (min-width: 300px) and (orientation: landscape)" type="image/jpeg">
      <!--[if IE 9]></video><![endif]-->
   <img src="…/max_650x650/public/2017-11/konstruktion.jpg" alt="Drupal 8 responsive image mit picture element">
</picture>

Bild-Toolkit

Am Ende noch etwas leichte Kost: Die Empfehlung, JPEG auf 75% Qualität zu komprimieren, stammt noch aus der Zeit, als wir Bilder in Briefmarkengröße in die Webseite setzten. Heute dürfen wir die Qualität beruhigt mit 50-60% ansetzen.

Meinungen, Fragen, Bemerkungen?

Klartext

  • Keine HTML-Tags erlaubt.
SVG-HIDE
Bearbeiten + Add responsive image style Beschriftung Operationen Narrow narrow Wide wide Bearbeiten FELD BESCHRIFTUNG FORMAT Aktualisieren Abbrechen WIDE Nichts Buchtitel - Ausgeblendet - Ausgeblendet Resp. Titelbild Klartext Formateinstellungen: Responsive Image Responsive Image Style * Responsive Bild-Stile konfigurieren Bild verlinken mit 1X NARROW [ALL AND (MIN-WIDTH: 300PX) AND (ORIENTATION: PORTRAIT)] Typ Mehrere Bildstile auswählen und das Sizes-Attribut verwenden. Einen einzelnen Bildstil auswählen. Diesen Breakpoint nicht verwenden. See the Responsive Image help page for information on the sizes attribute. Bilddarstellung Select an image style for this breakpoint. 2X NARROW [ALL AND (MIN-WIDTH: 300PX) AND (ORIENTATION: PORTRAIT)] Typ Mehrere Bildstile auswählen und das Sizes-Attribut verwenden. Einen einzelnen Bildstil auswählen. Diesen Breakpoint nicht verwenden. See the Responsive Image help page for information on the sizes attribute. Bilddarstellung Select an image style for this breakpoint. Quad Mobile 320x320 Quad Mobile 720x720 60 Wählen Sie ein Bildverarbeitungs-Toolkit GD2 Toolkit zur Bildbearbeitung GD2 TOOLKIT ZUR BILDBEARBEITUNG SETTINGS JPEG-Qualität % Legt die Bildqualität für JPEG-Bilder fest. Sie kann Werte von 0 bis 100