Seit der im 8. Dezember 2015 eingeführten Version 4.4 unterstützt WordPress nativ die Ausgabe responsiver, d.h. an das Endgerät des Betrachters angepasster, Bilder. Bisher musste dieses Feature mittels zusätzlicher Plugins (z.B. RICG Responsive Images) hinzugefügt werden. Zwar behält das genannte Plugin weiterhin seine Berechtigung – WordPress holt inzwischen aber auf.
Responsive Bilder – Grundlegende Funktionalität
Mittels zwei Attributen “srcset“ und “sizes“ eines <img>Elements lassen sich einfach verblüffende Einsparungen, insbesondere für die interessante Zielgruppe der mobilen User, erzielen.
Was können „srcset“ und „sizes“, was JS und CSS nicht kann?
Während JS und insbesondere CSS dafür verantwortlich sind, wie ein Bild (und andere Elemente) in HTML aussehen sollen, kann man dem Browser mit den zwei Attributen (srcset, sizes) frühzeitig – also bereits beim Einlesen der HTML-Struktur – mitteilen, welches Bild er herunterladen und später verwenden soll und wieviel Platz das jeweilige Bild auf der gesamten Seite einnehmen wird. Da ein Browser zunächst HTML, dann die Bilder, JS und CSS einliest und verarbeitet, ist das ein riesiger Bandbreite sparender Vorteil.
Dies bedeutet, ein guter Webdesigner zieht alle Register, d.h. nutzt alle Möglichkeiten, um dem Endnutzer möglichst von Anfang an passende Bilder auszuliefern, die nicht erst im Nachinein klein gerechnet werden müssen.
Das Attribut “srcset“
srcset ist eine zusätzliche Auszeichnung (ein Attribut) innerhalb eines img-Elements. Es dient dazu verschiedene Bilder mit bereits angegebener Bildgröße als Alternativen zum eigentlichen Inhalt (src) bereit zu stellen.Es kann eine kommaseparierte Liste der zu verwendenden Bilder in verschiedenen Größen bzw. Auflösungen jeweils gefolgt von einem Hinweis, wie groß das Bild ist, enthalten. Über die in Pixel übergebene Breite (w) oder Höhe (h) wird dem Browser die Zuordnung der Bilder ermöglicht. Dieser entscheidet letztlich, welches Bild für die Anzeige verwendet wird.
<img src="fallback.png" srcset="little.png 800w, retina.png 800w 2x, large.png 1080w, retina_large.png 1080w 2x" alt="Dies ist mein Bild" />
Mittels der vorstehenden Deklaration eines Bildes wurden neben dem src=“fallback.png“, welches mindestens dann zur Anzeige kommt, wenn der Browser das Attribut srcset nicht versteht, vier mögliche Bilder zur Auswahl übergeben.
- little.png 800w – kommt bei einem Display mit Standardauflösung und einem Platz von 800px Breite zum Tragen
- retina.png 800w 2x – wird im Falle eines Endgerätes mit hoher Auflösung (HiQ bzw. Retinadisplays) und einem Platz von 800px Breite verwendet
- large.png 1080w – soll bei einem Platz von 1080px Breite verwendet werden
- retina_large.png 1080w 2x – Dieses Bild soll ebenfalls bei einem Anzeigeplatz von 1080px Breite und HiQ-Displays Verwendung finden.
Es ist üblich, dass HiQ-Bilder (angezeigt durch 2x) in der gleichen Größe wie die Bilder mit einfacher Auflösung angezeigt werden, jedoch in ca. doppelter Dimension vorliegen.
Das Attribut „sizes“
Es komplettiert die Verwendung von „srcset“, indem es dem Browser verrät, wie viel Platz ein Bild – in etwa – bei einer bestimmten Größe des Viewports einnehmen wird.
Voreingestellt ist immer eine Breite von 100% (100vw). In Abhängigkeit dieser Information kann der Browser besser entscheiden, welches per srcset übergebene Bild bei einem vorhandenen Viewport verwendet werden soll.
sizes kann mit Mediaqueries und den üblichen Größenangaben (z.B. px, em) umgehen. Letztlich können so die bereits per CSS definierten Größenänderungen als zusätzliche Browserinformation angegeben werden.
<img sizes="(min-width: 800px) 800px, 100vw" srcset="..." src="fallback.png">
Mittels der obenstehenden Angaben wurde dem Browser nun mitgeteilt, dass das zu verwendende Bild …
- … wenn der Viewport kleiner als 800px ist, immer in einer maximalen Breite (100% des Viewports) dargestellt wird
- … wenn der Viewport exakt 800px oder größer ist (min-width), immer genau 800px Breit sein wird
Die Angaben von sizes können kommasepariert erfolgen, sodass für verschiedene Viewportgrößen auch in Abstufungen Bildgrößen definiert werden können.
Ausführliche Informationen gibt es z.B. in dem nachfolgenden englischsprachigen Artikel Responsive Images in Practice.
Verwendung in WordPress
Ohne zusätzlichen Aufwand profitiert man von diesem Feature jedoch nur im eigentlichen Inhaltsbereich einer Seite/eines Beitrags (the_content()). Verwendet man ein Template, welches die Bildausgabe in den einzelnen Templateseiten vornimmt, werden die regelmäßig vorhandenen vom Template oder WordPress definierten zusätzlichen Bildgrößen nicht in die Bildausgabe eingebettet.
Die Entwickler von WordPress haben einige neue Funktionen integriert, die eine flexible Integration von responsiven Bildern ermöglichen. Am schnellsten kommt man mittels wp_make_content_images_responsive() ans Ziel. Diese Funktion scannt den als Parameter übergebenen Inhalt nach Bildern und sucht bei jedem identifizierten Bild nach vorhandenen alternativen Größen, die Standardkonform mit srcset in den img-Tag eingebettet werden. Das Bild wird anhand der zwingend nötigen CSS Klasse „wp-image-XXX„, wobei XXX die individuelle ID des Bildes in der Datenbank darstellt, identifiziert und alternative Größen werden aus der Datenbank geholt.
Eine Alternative stellt die direkte Verwendung der Funktion wp_image_add_srcset_and_sizes($image, $image_meta, $attachment_id) dar. Während die vorstehend beschrieben Funktion den kompletten Inhalt nach der Kombination „img-Tag“ und „wp-img-xxx“ Klasse in CSS suchte, benötigt die nun vorgestellte Funktion ein fertiges HTML img-Element ($image), die Metainformationen des Bildes, die man mittels der Funktion wp_get_attachment_metadata() erhält ($image_meta) sowie die ID des Bildes ($attachment_id).
Will man nicht auf die berechneten Größen von WordPress zurückgreifen, lässt sich das Attribut auch individuell definieren, wie das folgende Beispiel aus dem WordPress-Artikel von make.wordpress.org zeigt:
<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">
Nur im letzten Fall wird jedoch das Attribut sizes individuell verwendet. Sofern für das Theme keine explizite Definition vorgenommen wurde, wird sizes immer nur mit „(max-width: Bild-Breite px) 100vw, Bild-Breite px“ gefüllt werden. Mittels eines Filters oder der vorstehenden individuellen Vorgehensweise lässt sich eine abweichende Darstellung erreichen.
Sie haben Fragen zu diesem Themenkomplex? Gerne können Sie mich kontaktieren!