Normal image: img tag mit f:media

Simple img tag. Fluid source  Parsed Fluid
Bild 1: img-Tag

Image mit einfachem img-Tag

Das Bild 1 benutzt das img-Tag in seiner einfachsten Form 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.

Für alle Bildschirmgrößen wird das selbe Bild ausgeliefert, so dass hier ein Kompromiss zwischen Dateigrösse und Qualität gefunden werden muss. Hier wird das Bild mit fast 1920px für kleinere Gerätegrüßen viel zu gross ausgeliefert und auf dem Client herunterskaliert.

Wenn man responsive Images mit dieser Methode verwendet (width bzw. max-width: 100%; height auto), dann kommt es zu Page Reflows, da der Browser den Platz für das Bild nicht mehr automatisch vorbelegt.

Hinweis: Debug (also Dimensions im Bild) funktioniert mit diesem Mode (derzeit) nicht.

Das Fluid dazu sieht so aus, es wird (ganz normal) der f:media viewhelper verwendet:

<f:media file="{file}"
         class="img-responsive"
         width="{dimensions.width}"
         alt="{file.alternative}"
         title="{file.title}"
         data="{
            'img-debug':'{jsdebug}'
         }"
/>

Plus

  • einfach
  • wenig Markup
  • w3c Standard
  • geht in allen modernen Browsern und ohne JavaScript

Minus

  • kein Support für adaptive Images. Für alle Gerätegrössen wird hier nur ein Bild angeboten
  • Page Reflows wenn responsive Images verwendet werden (s.o.)

Wann verwenden?

  1. Für Bilder, die auf unterschiedlichsten Bildschirmgrössen immer ungefähr gleich gross dargestellt werden
  2. wenn keine Art-Direction benötigt wird