Responsive Bilder für mobile Endgeräte: TYPO3 img srcset

Seit es mobile Endgeräte wie das Smartphone und den Tablet PC gibt, stehen Entwickler für Webseiten vor dem Problem, Bilder so in die Webseite einzubinden, dass diese bei sämtlichen Formaten gut aussehen. Responsive Bilder stellen eigentlich kein Problem dar – gibt es doch die Möglichkeit, mit ein wenig CSS Bilder stufenlos zu skalieren. Allerdings haben wir dann an anderer Stellen ein gravierenderes Problem, und das ist die Datenmenge und die damit verbundene Ladezeit. Wie bei vielen Problemen im Internet und auch bei einem Content Management System wie TYPO3 haben sich aber auch hier schon andere den Kopf zerbrochen und eine Lösung dafür gefunden. Diese nennt sich Image Source Set. Unter dem HTML Tag img srcset versteckt sich eine Zauberformel, mit der man das Endgerät entscheiden lässt, welches Bild geladen wird.

Bilder per CSS stufenlos skalieren

Wenn man bei Frontend Frameworks wie Bootstrap einen Blick in den Sourcecode wirft, sieht man oftmals einen Trick, mit dem man Bilder auf einer Webseite sehr einfach stufenlos skalieren kann. Der Style für ein Bild im CSS kann dann wie folgt aussehen: 

 .ce-image img {
    max-width: 100%;
    height: auto;
}

Damit sagt man einem Bild, dass es sich bis zu der Breite ausdehnen kann, die es entweder selber hat oder die ihm von einem in der Hierarchie darüber liegenden Element wie einem <DIV class=“col“> übergeben wird. Die zweite Zeile gibt dem Bild die Anweisung, das Verhältnis von Breite zu Höhe zu respektieren und entsprechend zu zoomen. Dies funktioniert in der Regel hervorragend. Wenn dies nicht der Fall ist, sollte man in der HTML-Grundstruktur der Webseite auf Fehlersuche gehen. Meist liegt der Fehler darin, dass man das ROW / COL Konstrukt von Bootstrap nicht mit dem Container umschlossen hat. 

Ladezeiten für mobile Webseiten beachten

Was diese ebenso kleine wie effektive Lösung per CSS nicht löst, ist das Problem der Ladezeiten. Sehen wir uns folgendes Szenario an: Sie sehen sich abends zu Hause auf dem Rechner mit einem 24 Zoll Bildschirm eine Webseite an. Oben sehen Sie ein hochauflösendes Bild des letzten Star Wars Film in voller Breite auf dem Bildschirm. Da Sie einen DSL Anschluss zu Hause haben, ist das Bild in Sekundenschnelle geladen. 

Am nächsten Morgen stehen Sie am Bahnsteig der S-Bahn und rufen dieselbe Webseite wie zu Hause am Desktop Rechner auf. Sie laden dasselbe Bild vom letzten Star Wars Film. Kurz bevor Sie am Dom aussteigen, ist das Bild geladen. Es passt exakt in die mobile Ansicht der Webseite, aber es hat seine Zeit gedauert, bis das Bild geladen worden ist. 

Konzept des img srcset in HTML

In diese Bresche springt nun das Konzept des img srcset. Der Grundgedanke ist: Wir laden nicht ein einziges Bild in unsere Webseite, das richtig groß ist, und skalieren es dann je nach Endgerät auf die maximal zur Verfügung stehende Größe. Sondern: Wir laden mehrere Versionen einen Bildes in unterschiedlichen Größen auf unsere Webseite. Das Endgerät bzw. der Browser entscheidet dann, welches Bild ihm passt und lädt das passende herunter. Um unseren Fall von Star Wars aufzugreifen: Zu Hause nehmen wir für die 24 Zoll das richtig große Bild mit 1920 Pixeln Breite. Für das 5 Zoll Smartphone hingegen reichen 320 Pixel in der Breite. Der Effekt: Sie sehen das Bild auf Ihrem Handy bereits am Bahnsteig vor dem Einsteigen und nicht erst kurz vor dem Dom. 

Umsetzung des Source Set (img srcset) bei TYPO3

Wenn man seine TYPO3 Webseite zusammenbaut und das Frontend für mobile Endgeräte und Desktop Rechner optimiert, dann nutzt man oft die oben beschriebene Möglichkeit des stufenlos skalierbaren Bildes über das CSS. Standardmäßig hat TYPO3 keine Lösung für das img srcset in HTML. Da TYPO3 aber ein über die Jahre gewachsenes und in der Praxis erprobtes System ist, hat man als Entwickler für eine TYPO3 Webseite eine einfache Möglichkeit, den Standard des Content Management Systems zu erweitern und einen Source Set zu erzeugen. 

Bei der Generierung des Inhalts einer Seite nutzt TYPO3 ein Baukastensystem, aus dem die einzelnen Bestandteile der Inhaltselemente zusammengebaut werden. Ein Teil dieser HTML Templates liest Bilddaten aus und stellt den entsprechenden Quellcode bereit, damit dieser <IMG>-Tag in die Webseite eingebaut werden kann. Genau dieses Modul aus der System Extension kann man nun überschreiben. 

Für die Darstellung der Bilder ist die Datei image.html zuständig. Diese befindet sich im folgenden Verzeichnis: 

[SERVER]/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering

Nun könnte man diese Datei überschreiben, was aber nicht sinnvoll ist, da man die TYPO3 Installation auf der eigenen Webseite nun nicht mehr so einfach updaten kann. Das Konzept der Suchpfade in der Templating Engine Fluid für TYPO3 bietet aber die Option, dass man eine eigene Datei als Kopie zu diesem Zweck anlegt und diese dem System anbietet. 

Zu diesem Zweck baut man sich in der Struktur der HTML Templates der eigenen TYPO3 Installation ein Verzeichnis auf, in dem man die Image.html ablegt. Dies kann in der Provider Extension geschehen. Im nächsten Schritt gibt man seinem System diesen Pfad in den TypoScript Konstanten mit. Dies kann wie folgt aussehen: 

 styles {
    templates {
        partialRootPath = EXT:extension/Resources/Private/Content/Partials/
    }
}

Damit bietet man dem System ein weiteres styles Objekt als Suchpfad für die Partials an. In die Image.html kann man nun den Quellcode schreiben, mit dem man das img srcset über den Fluid Viewhelper anbindet: 

 <f:media
  class="image-embed-item"
  file="{file}"
  width="{dimensions.width}"
  height="{dimensions.height}"
  alt="{file.alternative}"
  title="{file.title}"
  loading="{settings.media.lazyLoading}"
  additionalAttributes="
    {srcset: '{f:uri.image(image: file, maxWidth: 576)} 576w,
      {f:uri.image(image: file, maxWidth: 768)} 768w,
      {f:uri.image(image: file, maxWidth: 992)} 992w,
      {f:uri.image(image: file, maxWidth: 1200)} 1200w',
       sizes: '(min-width: 1200px) 50vw, 100vw'}
    "
  />

Wenn man nun die TYPO3 Webseite im Frontend neu aufruft, legt das System neben der Originaldatei neue Bilder in den oben definierten Größen an, die im processed Ordner des fileadmin abgelegt werden. TYPO3 nimmt uns hier die Arbeit ab, alle diese Bilder selbst erzeugen zu müssen. Nachteil dabei ist natürlich, dass man im processed Ordner keine Unterverzeichnisse mehr zur Suchmaschinenoptimierung hat. Der Name der Dateien wird erweitert, damit ist diese Möglichkeit zur SEO auch weiterhin gut zu nutzen. 

Links zu Source Set für Images

Mozilla Developer Network: Responsive Images