1. Sie sind hier:
  2. Home
    3. |
  3. Know How
    4. |
  4. Responsive Bilder mit TYPO3

Responsive Bilder in TYPO3

Mit dem Attribut srcset des <img>-Tags können Bilder in verschiedenen Größen referenziert und in Abhängigkeit der Bildschirmauflösung geladen werden. Das führt dazu, dass Bilder nur noch in der maximalen Größe ausgeliefert werden, in der sie auch benötigt werden. Somit wird der Pagespeed einer Webseite maßgeblich optimiert. Die Bilder in den Auflösungen werden auf dem Server automatisch generiert.

Was ist zu tun, um das src-Attribut in TYPO3 zu nutzen?

Die meisten TYPO3 Websites nutzen zur Darstellung im Frontend die statische Systemextension fluid_styled_content, weshalb wir die Vorgehensweise anhand dieser (Template-)Extension beschreiben(bei anderen Ansätzen ist analog vorzugehen).

1. Kopieren der fluid_styled_content-Extension

Kopieren Sie die Dateien aus dem Unter-Verzeichnis typo3src/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/ Ihrer TYPO3-Installation in ein neues Verzeichnis (z.B. fileadmin/fluid_styled_content/Resources/Private/Partials/Media/Rendering/). Arbeiten Sie also auf keinen Fall direkt im Extensionordner, da ein späteres Update Ihre Änderungen alle überschreiben würde.

2. Neue Pfadangaben im Konstanteneditor

Damit diese Template-Extension dann eingebunden wird, ist eine Einstellung im Konstanteneditor nötig. Wechseln Sie bitte in den Konstanteneditor ihres Templates und geben sie dort unter der Kategorie CONTENT in den folgenden 3 Feldern, den Pfad zu Ihrem "kopierten" Template ein.

Path of Fluid Template

3. Änderung der image.html

Für das Rendering (also die Darstellung) eines Bildes ist die Datei EXT:fluid_styled_content/Resources/Private/Partials/Media/Rendering/index.html zuständig.

Diese Datei muss um folgenden Eintrag erweitert werden:

 

<img src="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1200)}"
srcset="{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 368)} 368w,
{f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 768)} 768w,
                 {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 990)} 990w,
                 {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1200)} 1200w,
                 {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1440)} 1440w,
                 {f:uri.image(image: file, treatIdAsReference: 1, maxWidth: 1900)} 1900w"     
                 alt="{file.alternative}"
                 title="{file.title}"                
                 width="{dimensions.width}"
                 height="{dimensions.height}"/>

Was passiert?

Sie können nun ganz normal die Bilder im Fileadmin hochladen und als Content Element einbinden. TYPO3 gibt im Frontend dann das srcset-Attribut mit Verweis auf die unterschiedlichen Auflösungen aus.

Im Quellcode sieht das dann z.B. so aus:

 

Besipiel HTML-Ausgabe des srcset-Attributes
So gibt TYPO3 das srcset-Attribut aus

Die Originaldatei liegt unter:

/fileadmin/introduction/images/streets/adrian-207619.jpg

Der Browser lädt bei einer Display-Auflösung:

  • von max. 368 Pixeln die Datei csm_adrian-207619_bce72f35d3.jpg
  • von 369 bis 768 Pixeln die Datei csm_adrian-207619_e58f25fdf5.jpg
  • usw.

Die Dateien werden von TYPO3 dynamisch in der maximal erforderlichen Größe generiert und im Cache(zu erkennen am Pfad "_processed_") bereit gestellt. Der Redakteur muss sich um nichts kümmern!

Mit einer einfachen Netzwerkanalyse erkennt man schnell die Optimierungsgewinne:

Größenunterschied durch die Nutzung des srcset-Attributes
Größenunterschied durch die Nutzung des srcset-Attributes

In diesem Beispiel wird also für Smartphones (bis 368 Pixel) ein wesentlich kleineres Bild (61.0 KB) als zum Beispiel für Tablets mit bis zu 768 Pixeln (254 KB) geladen. Die Originaldatei für Desktops ist sogar über 306KB groß.

Noch ein kleiner Tipp zum Schluss:

Optimieren Sie Bilder vor dem Hochladen für das Web. Das können Sie beispielsweise über eine kostenlose Software wie irfanview oder über einen webbasierten Dienst wie TinyPNG.