Responsive Webseiten: Drupal 8 Bilder
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 Konsistenz in 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 Branding.
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:
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 sich 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
Wenn der Browser ein Bild aus dem srcset-Angebot einmal übertragen hat, bleibt es dabei. Auch wenn das Browserfenster verkleinert oder vergrößert wird, lädt der Browser das Bild nicht erneut.
- 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 ">
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.
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.
Mehr zu Bildern auf Webseiten
Fotos, Grafiken und Illustrationen für die Webseite optimieren – Grundlagen der Bildbearbeitung fürs Web von der Auflösung bis zum Seitenverhältnis.