Responsive Images sind seit der Version 3.4 Teil von Contao. In diesem Artikel erfahren Sie, welche neuen Möglichkeiten es gibt und wie Sie Ihre Bilder schnell und einfach responsive einbinden. Außerdem zeigen wir Ihnen, was Sie dabei im Bezug auf Performance und ältere Browser beachten sollten.

Liebling, wir haben die Content-Bilder geschrumpft.

Zentrale Bildgrößen definieren

Um die Einstellung der Bildgrößen für Redakteure zu vereinfachen und die Wartbarkeit für Administratoren zu verbessern, können Bildgrößen in den Theme-Einstellungen nun zentral definiert werden.

Um eine neue Bildgröße anzulegen navigieren Sie im Backend zu Layout › Themes › Bildgrößen. Dort können Sie einen Namen vergeben und die üblichen Einstellungen (Breite, Höhe, Modus) setzen. Danach können Sie in jedem Inhaltselement oder Modul, das über eine Einstellungsmöglichkeit für die Bildgröße verfügt auf die angelegten Definitionen zurückgreifen.

Die zentrale Einstellung der Bildgrößen erleichtern es, vor allem Redakteuren, konsequent dieselben Einstellungen zu verwenden. Gleichzeitig kann sichergestellt werden, dass keine Bildgrößen gewählt werden, die das Layout negativ beeinflussen. Und unabsichtlich in voller Größe eingebundene Bilder sollten damit ebenfalls der Vergangenheit angehören.

Die Praktikanten atmen auf: Bei einem Design-Update oder Relaunch müssen künftig nicht mehr sämtliche Bilder einzeln editiert werden um z. B. die Bildgröße oder Proportionen an das neue Design anzupassen.

Die verschiedenen Arten von Responsive Images

Es gibt grundsätzlich zwei Arten von Responsive Images.

Bei der ersten Variante werden Bilder mit unterschiedlicher Auflösung angezeigt, abhängig von der Größe und der Pixeldichte des Bildschirms. Der Bildausschnitt und die Proportion des Bildes bleiben jedoch gleich. Hierfür wird das srcset- und das sizes-Attribut eingesetzt.

Beispiel für ein Responsive Image ohne Veränderung des Ausschnitts.

Die zweite Variante wird als „Art Direction“ bezeichnet. Dabei wird abhängig von der Bildschirmgröße, des Bildschirmformats und möglichen anderen Faktoren ein anderer Bildausschnitt und/oder eine andere Proportion des Bildes angezeigt. Hierfür wird das <picture>-Element verwendet.

Beispiel für ein Responsive Image mit verändertem Ausschnitt und verschiedenen Proportionen.

Responsive Images ohne „Art Direction“ in Contao

Unterschiedliche Auflösungen für verschiedene Pixeldichten (z. B. „Retina“) können eingerichtet werden, indem man in den Bildgrößen-Einstellungen die gewünschten Pixeldichten einträgt. Wenn Sie für eine Größe von 100x100 die Pixeldichten 0.5x, 1x, 2x vergeben, wird automatisch für jedes Bild, das dieser Größe zugeordnet ist ein 50x50, 100x100 und 200x200 großes Bild erzeugt.

Um zusätzlich verschieden breite Bildschirme zu unterstützen, muss das sizes-Attribut in den Einstellungen vergeben werden. Diese Einstellung teilt dem Browser mit, in welcher Breite das Bild angezeigt wird.

Wenn das Bild immer in voller Breite des Fensters angezeigt wird, tragen Sie 100vw ein. Wenn ein Bild z. B. auf kleineren Bildschirmen in voller Breite angezeigt wird und in größeren immer 500 Pixel breit ist, tragen Sie (max-width: 600px) 100vw, 500px ein. Auch mehrere Media-Queries können verwendet werden z. B. (max-width: 600px) 100vw, (max-width: 900px) 60vw, 500px.

Die Einstellung folgt dem Schema: Media-Query in Klammern (optional), gefolgt von Wert und Einheit. Mehrere Angaben getrennt durch Komma.

Wenn nun bei einer 100x100-Bildgröße unter Sizes 100vw und unter Pixeldichte 0.5x, 1x, 2x eingestellt ist, erzeugt Contao ein 50x50, 100x100 und 200x200 großes Bild und der Browser entscheidet anhand der Sizes-Einstellung und der Daten des Bildschirms welches dieser Bilder geladen wird.

Der Zoom-Faktor und der bedeutende Bereich von Bildern

Der bedeutende Bereich eines Bildes kann im Contao-Backend in der Dateiverwaltung festgelegt werden. Editieren Sie dafür das gewünschte Bild unter System › Dateiverwaltung und markieren Sie den Bereich mit dem Mauszeiger. Dabei sollte der Bereich des Bildes markiert werden der für den Informationsgehalt von Bedeutung ist bzw. möglichst immer sichtbar sein sollte.

In den Einstellungen der Bildgröße kann nun ein Zoom-Faktor angegeben werden. Bei 0% wird das gesamte Bild angezeigt, bei 100% wird nur der zuvor markierte bedeutende Bereich des Bildes angezeigt und von 1% bis 99% werden Zwischenschritte des Ausschnitts berechnet.

Links: Zoom 0%, Mitte: Zoom 50%, Rechts Zoom 100%

Responsive Images mit „Art Direction“ in Contao

Pro Bildgröße können Sie zusätzlich Media-Queries anlegen. Navigieren Sie dazu im Contao-Backend nach Layout › Themes › Bildgrößen, editieren eine Bildgröße und klicken auf Neues Bildgrößen-Media-Query. Dort können Sie ein beliebiges CSS-Media-Query angeben wie z. B. (max-width: 600px), (orientation: portrait) oder print und zugehörige Größeneinstellungen definieren.

Dabei gilt es die Reihenfolge der Media-Queries zu beachten, denn der Browser geht diese Liste von oben nach unten durch und nimmt den ersten Eintrag mit passendem Media-Query. Wenn keines der Media-Queries zutrifft, werden die Haupteinstellungen der Bildgröße verwendet. Die komplette Konfiguration einer Bildgröße mit „Art Direction“ könnte folgendermaßen aussehen:

• Bildgröße 1000x200, Exaktes Format, 0% Zoom
  • Media-Query (max-width: 600px) 600x300, Exaktes Format, 100% Zoom
  • Media-Query (max-width: 900px) 900x350, Exaktes Format, 50% Zoom

Browser-Unterstützung und Polyfill

Die Browser-Unterstützung für Responsive Images ohne Art-Direction und mit Art-Direction ist noch nicht sehr weit fortgeschritten, man kann das Feature jedoch mit JavaScript nachrüsten. In Contao ist standardmäßig ein Script enthalten, das nur aktiviert werden muss.

Den JavaScript-Polyfill aktivieren

Navigieren Sie zu den Layouteinstellungen unter Layout › Themes › Seitenlayouts im Bereich Responsive Bilder und aktiveren den Punkt Das Image-Polyfill laden. Der Image-Polyfill ist optional, denn Browser die <picture> oder srcset nicht verstehen, ignorieren diese Angaben einfach und laden die Standardgröße des Bildes.

Performance

Da Contao jede Variante eines Bildes erstellen und abspeichern muss, sollte man für die Server-Performance bei kleinen Webhosting-Paketen darauf achten, nicht zu viele Varianten einzustellen. Denn für jede eingestellte Pixeldichte und für jeden Media-Query berechnet Contao ein eigenes Bild und speichert es auf dem Webserver.

Für die Performance im Browser sollte beachtet werden, dass es bei aktiviertem Image-Polyfill vorkommen kann, dass zwei Server-Abfragen für ein Bild ausgeführt werden müssen. Einmal für die Standard-Variante und ein zweites Mal für die „richtige“ Variante des Bildes. Um das zu verhindern, sollten Sie die Standardgröße so wählen, dass sie für die meisten Besucher bereits passt. Wenn eine Website z. B. hauptsächlich in mobilen Browsern aufgerufen wird, sollten die Standardgrößen darauf ausgerichtet sein.

Fazit

Administratoren bzw. Designer können ab Contao 3.4 umfangreiche Einstellungen für die Bildgrößen vornehmen. Der Workflow für Redakteure hat sich gleichzeitig vereinfacht: Bild hochladen, bedeutenden Bereich auswählen, Bild einfügen und vordefinierte Größe auswählen. Fertig.

Alle RockSolid Themes und Erweiterungen setzen ab sofort standardmäßig auf Responsive Images. Mit unserem Free Theme Open Sauce können Sie die beschriebenen Punkte einfach nachvollziehen, sehen Sie sich dafür die Bildgrößen Slider und Tagline genauer an.

Dank

Es war sehr spannend für mich, an diesem wichtigen neuen Contao-Feature mitzuarbeiten. Ich möchte mich bei Yanick Witschi für seine Unterstützung und bei der gesamten Contao-Community für das rege Interesse an dem Thema bedanken. Ich freue mich darauf bald mehr (Contao-)Websites mit Responsive Images zu sehen.

Über den Author

Martin Auswöger

Martin ist einer der Gründer von RockSolid Themes und beteiligt sich als Core-Developer an der Entwicklung von Contao. Die Suche nach effizienten und intelligenten Lösungen treiben ihn täglich an. Für Kochen, Gesellschaftsspiele oder eine gemütliche Bergtour kann man ihn fast immer begeistern.

Folgen Sie Martin auf Mastodon und GitHub.