Bildschirmfüllende Bilder, responsive, erstellt mit mask

Wenn das Design ein Element vorgibt, das aus einem bildschirmfüllenden Bild samt Headline besteht, kann man zur TYPO3 Extension Mask greifen. Es wäre allerdings schön, wenn bei kleineren Monitoren auch kleinere Bilder geladen würden.

Das Ausgangsbild ist z.B. 2000 Pixel breit, 1000 Pixel hoch, wiegt 500 KB und liegt nach dem Upload hier: fileadmin/user_upload.
Das Ziel ist, die Dateigröße für die Anzeige auf der Website wesentlich zu verringern, etwa auf 150 KB für große Bildschirme und auf etwa 50 KB für das Handy; Stichwort „responsive Images“. Eine Google Suche liefert alles zum Thema.

Die konkrete Umsetzung ist dann evtl. doch ein wenig tricky. So geht es, wenn man wie oben erwähnt die Extension mask verwendet:

<f:for each="{data.image}" as="file">
  <img 
    src="{f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 1168)}" 
    srcset="{f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 768)} 768w,
      {f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 990)} 990w,
      {f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 1200)} 1200w,
      {f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 1440)} 1440w,
      {f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 1900)} 1900w,
      {f:uri.image(src:'/fileadmin/{file.originalFile.identifier}', treatIdAsReference: 1, maxWidth: 2000)} 2400w" 
    sizes="100vw" 
    alt="{file.alternative}" 
    title="{file.title}" 
  />
</f:for>

Was passiert hier?

TYPO3 generiert 5 Bilder und legt diese in fileadmin/_processed_ ab. Die Bilder haben die angegebenen Größen: 768px, 990px, 1200px, 1440px, 1900px (das, was jeweils als „maxWidth“ angegeben ist). Schließlich kommt bei diesem Code auch das Originalbild aus fileadmin/user_upload zum Einsatz und zwar bei Bildschirmgrößen über 1900 Pixel Breite. Letzteres könnte man vermeiden, wenn man statt

treatIdAsReference: 1, maxWidth: 2000)} 2400w
treatIdAsReference: 1, maxWidth: 1999)} 2400w

schreibt.
Die hintere Zahl in jeder Zeile (die mit dem w) ist sozusagen das Media Query. Damit wissen moderne Browser, welches Bild sie verwenden sollen. Unmoderne verwenden die Fallback Angabe in src="..."

Bsp.: bei einer Bildschirmbreite von 800 Pixel kommt das 990er Bild zum Einsatz, bei 1480 Pixel das 1900er usw..

Das „sizes“ Attribut bekommt in diesem Beispiel den Wert „100vw“, also „volle Breite“, weil ja immer Bildschirmfüllung gewünscht ist. Hier benötigen wir keine Media Queries.

Link