Best Practices für responsive Bilder in TYPO3

Da Suchmaschinen, wie Google, die Ladezeit einer Website als Ranking-Faktor berücksichtigen, ist eine optimierte Auslieferung der Bilder nicht nur ein Dienst an der Menschheit, sondern ein direkter Hebel für bessere Rankings und mehr Konversionen.

Mit der Einführung und zunehmenden Unterstützung moderner Bildformate wie AVIF und WebP ergibt sich die Möglichkeit, die visuelle Qualität der Bilder zu erhöhen und gleichzeitig die Dateigrößen enorm zu reduzieren. Diese Fortschritte sind entscheidend, um die Ladezeiten zu verbessern und das Datenvolumen zu senken, was besonders für Nutzer auf mobilen Geräten mit begrenzten Datenplänen von Bedeutung ist.

Viele Corporate Websites nutzen diesen Hebel bislang nicht. Laut BuiltWith ist WebP auf nur ca. 7 % der Websites im Einsatz und nur 0,1 % der Websites setzen laut w3techs.com das AVIF-Bildformat ein.

TYPO3, als eines der flexibelsten Content Management Systeme, bleibt an der Spitze dieser Entwicklungen, indem es kontinuierlich Unterstützung für neue Technologien und Standards bietet. Die bevorstehende TYPO3 Version 13 LTS (Release geplant für Oktober 2024) verspricht beispielsweise verbesserte native Unterstützungen für moderne Bildformate, was für Entwickler und Content Manager erhebliche Vorteile bringt.

Aber auch in aktuell verbreiteten TYPO3 Versionen können die modernen Bildformate mit ein wenig Know-how und Code bereits genutzt oder nachgerüstet werden.

In diesem Artikel werden wir die Notwendigkeit von responsiven Bildern diskutieren, die Vorteile moderner Bildformate beleuchten und durch praktische Beispiele zeigen, wie du diese Technologien in TYPO3 effektiv implementieren kannst. Durch das Verständnis dieser Konzepte und Techniken kannst du deine Website nicht nur schneller und reaktionsfähiger machen, sondern auch das Nutzererlebnis signifikant verbessern.

Responsives Webdesign ist heutzutage unverzichtbar, wenn du sicherstellen möchtest, dass deine Website auf verschiedenen Geräten, von Smartphones bis zu großen Desktop-Bildschirmen, optimal dargestellt wird. Im Zentrum dieses Ansatzes stehen responsive Bilder. Doch was genau bedeutet das, und wie setzt du es technisch um?

Ein responsives Bild passt seine Größe automatisch an den Viewport des Geräts an, auf dem es angezeigt wird. Dabei wird nicht dasselbe Bild einfach skaliert, sondern es werden mehrere Versionen eines Bildes bereitgestellt, jeweils optimiert für unterschiedliche Bildschirmgrößen. Das Ziel ist es, auf jedem Gerät die beste mögliche Bildqualität bei gleichzeitiger Reduzierung der Ladezeiten zu bieten.

Responsive Bilder können auf vielfältige Weise gebaut und eingesetzt werden, die auch über die hier beschriebenen Anwendungsfälle hinaus gehen. Ich beschränke mich hier daher auf das aus meiner Sicht meistgenutzte Szenario und Best Practice. Wir erzeugen also aus einem Quellbild, unterschiedliche Größen- und Dateityp-Varianten. Wir beleuchten nicht, wie man auf Smartphones ein ganz anders zurechtgeschnittenes Bild nutzt (z. B. Hochformat) als auf einem Desktop (z. B. Querformat) und andere Spielarten.

Die technische Umsetzung von responsiven Bildern erfolgt in der Regel durch HTML-Markup, das verschiedene Bildquellen für unterschiedliche Bildschirmbreiten definiert. Hierfür werden meist das <picture>-Element sowie die Attribute srcset und sizes verwendet:

• <picture>: Dieses HTML-Element erlaubt es dir, mehrere <source>-Elemente zu verwenden, die jeweils verschiedene Bildquellen für unterschiedliche Bedingungen definieren können.
• srcset: Hier gibst du eine Liste von Bildern mit ihren jeweiligen Größen an. Der Browser wählt aus dieser Liste basierend auf den aktuellen Bildschirmbedingungen das passendste Bild aus.
• sizes: Dieses Attribut beschreibt, wie groß das Bild in verschiedenen Szenarien angezeigt werden soll. Du definierst hier die Breite des Bildes relativ zum Viewport, was dem Browser hilft, das geeignete Bild aus dem srcset zu laden.

Ein einfaches Beispiel:

Dasselbe Ergebnis mit etwas kompakterem Code geschrieben (kommagetrennt in einem <source>-Tag):

In diesem Beispiel definiert das <source>-Element drei Bildgrößen für Browser, die dieses Markup unterstützen, und das <img>-Element dient als Fallback für Browser, die das <picture> und <source>-Element nicht unterstützen. Das sizes-Attribut steuert, wie viel Platz das Bild je nach Bildschirmbreite einnehmen soll.

Die Auswahl der richtigen Bildgröße überlassen wir in diesem Fall dem Browser. Der Webbrowser kennt die eigene Viewport-Größe, aber vor dem Laden der Bilder und CSS-Dateien nicht die Bildgröße und die Darstellungsgröße des Bildes. Daher geben wir dem Browser diese Informationen bereits im HTML-Code mit:

Die Information 500w im srcset teilt dem Browser mit, dass Bild 500px breit ist. Mit sizes="(max-width: 600px) 100vw, 50vw" übermitteln wir die Information, dass das Bild 100 % des Viewports einnimmt und ab einer Viewport-Breite größer 600px die halbe Breite des Viewports einnimmt. Anhand dieser Informationen kann nun das passende Bild geladen werden.

Beispiel: Viewport 1000px, Darstellung 50 % (bei Pixeldichte 1) = das 500px Breite Bild ist groß genug.

JPG war eine ganze Weile der Standard für Fotos im Web. PNG war das Format der Wahl für Grafiken (mit weitestgehend einheitlichen Farbflächen) oder wenn Transparenz gefordert war. Moderne Bildformate wie AVIF und WebP bieten jedoch inzwischen gegenüber traditionelleren Formaten wie JPEG oder PNG erhebliche Vorteile.

• Effizienz und Qualität: AVIF steht für "AV1 Image File Format" und basiert auf dem gleichen Kompressionsalgorithmus wie das Videoformat AV1. Es bietet eine außergewöhnliche Kompressionsrate, was bedeutet, dass du Bilder in sehr hoher Qualität bei deutlich reduzierter Dateigröße erhalten kannst. Dies führt zu schnelleren Ladezeiten ohne Qualitätsverlust.
• Breite Farbraumunterstützung: AVIF unterstützt breite Farbräume, hohe Dynamikumfänge (HDR) und ist damit ideal für moderne Displays.

• Universelle Kompatibilität und Vielseitigkeit: WebP wird von den meisten modernen Browsern unterstützt und bietet eine bessere Kompression als JPEG und PNG, oft mit 25−34 % kleineren Dateigrößen bei vergleichbarer oder besserer Qualität.
• Unterstützung für Transparenz und Animation: WebP unterstützt sowohl Transparenz (ähnlich wie PNG) als auch Animation (ähnlich wie GIF), was es zu einem vielseitigen Werkzeug für Webdesigner macht.

AVIF und WebP unterstützen beide Transparenzen und bieten sich für die Kompression von Grafiken und Fotos an. Als Faustregel ist ein WebP 30–50 % kleiner und ein AVIF 50–90 % kleiner als ein JPG, bei vergleichbarer Bildqualität.

War Transparenz bisher nur mit PNG (und damit einer für Fotos ziemlich ungeeigneten Kompression) möglich, so bieten WebP und AVIF das Beste aus beiden Welten – gute Kompression (ähnlich und besser als JPEG) plus Transparenz. Du kannst im TYPO3 Backend also ein JPG-Foto oder ein PNG mit Transparenz hochladen und in beiden Fällen sind WebP und AVIF ideal dafür geeignet diese zu komprimieren.

Theoretisch unterstützen beide Formate (AVIF und WebP) Animationen, aber dafür bietet sich oftmals ein echtes Video an (ein ordentlich komprimiertes MP4-Video kann bereits 5–10 mal kleiner sein als ein GIF).

Liegen Grafiken als Vektorgrafik vor, bietet sich zur Bereitstellung im Web natürlich das SVG-Format an. Da wir aus PNGs und JPGs aber keine SVGs generieren werden, beleuchten wir dieses Format in diesem Artikel nicht weiter.

Das hauptsächlich von Apple (Safari) unterstützte HEIC-Format ähnelt dem AVIF-Format stark. Wir vergleichen hier die Kompressionsraten, aber werden es aufgrund der geringen Verbreitung nicht weiter berücksichtigen.

Ein auf TYPO3 12.4 durchgeführter Test zeigt folgende reale Unterschiede in der Dateigröße der unterschiedlichen Bildformate (eine Reduktion um bis zu 88 %):

Vergleichen wir die Kompression bei einem Foto, das eine Transparenz-Maske enthält, können wir deutlich größere Reduktionen erreichen (um bis zu 97 %):

Und auch noch beim Vergleich einer einfachen zweifarbigen Grafik, erreichen wir deutliche Einsparungen (um bis zu 77 %):

Der Erfolg eines Bildformats im Web hängt stark von seiner Unterstützung durch Webbrowser ab. WebP ist mittlerweile weitverbreitet und wird von den meisten modernen Browsern unterstützt. AVIF gewinnt ebenfalls schnell an Akzeptanz, nachdem es von großen Playern wie Google Chrome und Firefox unterstützt wird. 

Websites wie CanIUse.com bieten aktuelle Informationen zur Browserunterstützung für diese Formate. Die Unterstützung für WebP und AVIF liegt bei deutlich über 90 % der installierten Webbrowser.

Die Verwendung moderner Bildformate kann die Ladezeiten deiner Website drastisch reduzieren und gleichzeitig die visuelle Qualität verbessern. Dies trägt nicht nur zu einer besseren Benutzererfahrung bei, sondern kann auch deine SEO verbessern, da Suchmaschinen schneller ladende Seiten bevorzugen. Zudem reduziert die geringere Bandbreitennutzung die Kosten für dich und deine Nutzer, besonders relevant für mobile Nutzer mit begrenzten Datenraten.

Durch die Kombination von modernen Bildformaten und responsiven Bildergrößen kannst du die Datenlast der Bilder auf deiner Website locker um 50–70 % reduzieren. Auf den kleinsten Bildschirmen wahrscheinlich noch mehr.

Hier ein einfaches Beispiel für den HTML-Code der dem Browser drei unterschiedliche Bildformate zur Auswahl anbietet:

Der Browser verwendet das erste Bildformat, dass er unterstützt. Die Reihenfolge spiegelt also die festgelegte Priorität wider (bestes Bildformat zuerst). Mit type="image/avif" teilen wir dem Browser mit, dass es sich um ein AVIF-Bild handelt, wenn er dieses Format unterstützt, soll er es laden, wenn nicht, versucht er sich am nachfolgenden <source>- oder <img>-Element.

Kombinieren wir nun Bildgrößen und Bildformate, könnte der Code so aussehen:

TYPO3 ist bekannt für seine Flexibilität und Stärken im Content Management, die es zu einer ausgezeichneten Wahl für moderne Webprojekte macht. Ein wichtiger Aspekt von TYPO3 ist seine Fähigkeit, responsive Bilder effektiv zu verwalten und zu liefern … und (für Entwickler) diese Auslieferung exakt zu steuern. Dies ist besonders wichtig, da die Nutzung von responsiven Technologien direkt die Benutzererfahrung und die Performance deiner Website beeinflusst.

Mit jeder neuen Version verbessert TYPO3 seine Unterstützung für moderne Web-Standards, einschließlich responsiver Bildtechniken. Die angekündigte TYPO3 Version 13 LTS ist besonders vielversprechend, da sie die Unterstützung und umfassendes Handling für moderne Bildformate wie AVIF und WebP im Core einführt. Dies bedeutet, dass du als Entwickler oder Content-Manager Zugang zu den neuesten Tools hast, um die Effizienz deiner Website zu maximieren.

Du kannst AVIF und WebP jedoch auch bereits ab Version TYPO3 10.3 einsetzen, sofern deine Bildbearbeitungssoftware dies serverseitig unterstützt. Bei mittwald hast du diese Möglichkeiten mit WebP-1.2.2 und ImageMagic-7.1.1 (mit HEIC und AVIF Support) bereits.

TYPO3 ermöglicht es, Bilder dynamisch an die Bedürfnisse verschiedener Endgeräte anzupassen. Mithilfe des <picture>-Elements und der damit verbundenen Fluid-ViewHelper können Entwickler verschiedene Bildquellen für unterschiedliche Bildschirmgrößen definieren.

In seinem Blogartikel auf T3PLANET beschreibt Sanjay Chauhan 12 unterschiedliche Ansätze responsive Bilder in TYPO3 zu erzeugen. Von Typoscript, über Fluid bis zum Einsatz verschiedener Erweiterungen. Ein Blick lohnt sich. Für die Zwecke dieses Artikels werden wir uns auf die Einbindung in Fluid mithilfe des uri.image ViewHelpers (<f:uri.image>) beschränken

Die Fluid-Template-Engine von TYPO3 bietet den f:image und den f:uri.image ViewHelper, die das Handling von responsiven Bildern stark vereinfachen. Diese ViewHelper erlauben es, Bilder mit verschiedenen Quellen und Größen zu definieren, die basierend auf den Media-Queries geladen werden. Beispielsweise kann man in TYPO3 verschiedene Bildvarianten für spezifische Breakpoints definieren, um sicherzustellen, dass die optimale Bildgröße geladen wird.

Ein einfaches Beispiel mit alternativen Bildgrößen, bei der Nutzung des <picture>-Elements in TYPO3, könnte wie folgt aussehen:

Die ab TYPO3 10.3 mit dem Core ausgelieferten Fluid ViewHelper erlauben nun die optionale Angabe einer gewünschten Dateierweiterung über das neue Attribut fileExtension. Somit können mit diesem ViewHelper auch ohne großen Aufwand WebP oder AVIF-Bilder generiert werden.

Folgender Code zeigt, wie wir alternative Bildformate generieren können:

Wenn wir Bildgrößen und Bildformate entsprechend kombinieren wollen, und in diesem Beispiel 6 Bildgrößen im AVIF-Format bereitstellen wollen und nur 3 Bildgrößen im WebP-Format (und einfach 1 JPG-Fallback), könnte der Code wie folgt aussehen:

Wir könnten auch jede Bildgröße in ein eigenes <source>-Element schreiben und jeweils 6 Bildgrößen für AVIF, WebP und JPG/PNG generieren, ohne eine nennenswert größere Zielgruppe damit zu erreichen. Aber durch die kompakte Schreibweise und Reduktion der erzeugten Bildvarianten, nehmen wir nicht nur Last vom Server (bei der Bildgenerierung), sondern sorgen auch dafür, dass der HTML-Code nicht übermäßig aufgebläht wird.

Vergiss nicht, WebP und AVIF generell als Bild-Format in deiner LocalConfiguration zulassen:

Mit der richtigen Konfiguration und dem Einsatz von responsiven Bildern und modernen Bildformaten wie WebP und AVIF in deinem TYPO3 bist du bestens gerüstet, deine Website nicht nur optisch ansprechend, sondern auch technisch auf dem neuesten Stand zu halten.

Durch die Implementierung dieser Techniken kannst du die Ladezeiten signifikant verkürzen, die Benutzererfahrung verbessern und deine SEO-Position stärken.

Ich hoffe meine Ausführungen und Beispiele helfen dir dabei, bessere responsive Bilder in deinen Webprojekten zu erzeugen und dies sinnvoll in deinen TYPO3 Stack zu integrieren.