Picture mit srcset

Das Bild 1 benutzt das picture-Tag mit sourcessrcset und sizes und kommt aus einem Typo3 Default-Contentelement vom CType 'image', ist also vom Editor pflegbar. Das Bild sitzt in einer 50% breiten Spalte, auf kleineren Bildschirmen bricht es dann auf 100% Breite um.

Ausserdem haben wir jetzt zwei unterschiedliche Beschnitte (cropVariants): 16:9 für Desktop und 4:3 für Tablets/Mobile. Den Breakpoint zwischen beiden ist im source-Attribut des picture-Tags dabei als < 768px definiert.

Wir haben das selbe Problem wie beim einfachen Image mit srcset: wir müssen dem Browser mit dem sizes Attribut mitteilen, wie gross das Bild dargestellt werden wird (also: 100% wenn kleiner 768px, ansonsten etwa 50% breit), damit der Browser den idealen Kandidaten unter den mit srcset bekannt gemachten auswählen kann. Nur: auch hier kommt der Content wieder aus dem Backend und ist variabel einsetzbar. Es weiss also wieder nur der Editor, wie gross das Bild bei unterschiedlichen Display-Größen tatsächlich sein wird.

Für das Bild 1 hat unser (ziemlich cleverer) Editor einen guten Wert für sizes gefunden und damit funktioniert auch das picture hier gut, diesmal sogar mit ein wenig Art Direction durch unterschiedliches Format/Beschnitt des Bilds:

 

(min-width:768px) calc(50vw - 45px),calc(100vw - 30px)

Das Fluid dazu sieht so aus, es wird (ganz normal) der f:media viewhelper verwendet. Die srcset-Attribute werden vom ai:getSrcset Viewhelper generiert:

<picture>
    <source media="(max-width: 767px)"
            srcset="{ai:getSrcset(file:file, cropVariant: 'mobile', widths:'240,360,480,768', debug:debug)}">

    <f:media file="{file}"
             class="image-embed-item img-responsive"
             width="{dimensions.width}"
             alt="{file.alternative}"
             title="{file.title}"
             data="{
                 'img-debug':'{jsdebug}'
             }"
             additionalAttributes="{
                 'sizes':'{sizesAttr}',
                 'srcset': '{ai:getSrcset(file:file, widths:\'1024,1440,1920\', debug:debug)}'
             }"
    />
</picture>

Plus

  • relativ einfache Syntax, wenn man sie einmal verstanden hat
  • w3c Standard
  • geht in allen modernen Browsern und ohne JavaScript
  • kann mit cropVariants umgehen, also ist Art Direction möglich

Minus

  • man muss das Layout bei verschiedenen Breakpoints kennen um dem Browser mitzuteilen, in welcher Größe das Bild auf welcher Bildschirmgröße dargestellt wird. Schwierig realisierbar bei dynamisch pflegbaren Inhalten
  • Hier ist im Template der Breakpoint zwischen den beiden Beschnitten hardecoded im template. Das konfigurierbar machen wäre sicher möglich, würde die Komplexität für Editoren und Admins aber nur noch weiter erhöhen.

Wann verwenden?

Wenn man die Größe und Beschnitte (cropVariants) eines Bildes über die Breakpoints hinweg sicher kennt, z.B. ein Header-Bild, das immer 100% breit sein wird.