TYPO3 - Responsive Images
Siehe auch
http://typo3worx.eu/2016/03/responsive-images-on-typo3-websites/
http://typo3blogger.de/responsive-images-typo3-6-2/
http://scottjehl.github.io/picturefill/
Kurzeinführung
Hinweis: Im Moment (2016) sieht es so aus als ob srcset als Standard das Rennen macht...
Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/
Derzeit aktuelle HTML-Lösungen binden die verschiedenen Bildgrößen im HTML als Ressource ein. Meist kommt dabei zusätzlicher JavaScript-Code zum Einsatz, um das DOM-Objekt der Seite entsprechend des Breakpoints zu modifizieren oder um einen Fallback für ältere Browser zu erstellen. Die drei gängigsten und am weitesten verbreiteten Lösungen sind dabei:
Picture Tag
<picture alt="responsive image">
<source xsrc="large.jpg" media="(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px)">
<source xsrc="medium.jpg" media="(min-width:800px), (min-resolution: 136dpi) and (min-width:400px)">
<source xsrc="small.jpg">
<!-- fallback -->
<img xsrc="small.jpg" alt="responsive image">
</picture>
Srcset Attribute
<img alt="responsive image" xsrc="small.jpg" srcset="large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x">
Data Attribute
<img alt="responsive image" xsrc="small.jpg" data-large="large.jpg“ data-large-1.95x="large.jpg“ data-medium="medium.jpg“ data-medium-1.95x="large.jpg“>
Umsetzung über css_styled_content
Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/
Ab 6.2 sind über„css_styled_content“ bereits diese drei Lösungen vorbereitet. Ein Integrator muss nur noch eine passende JavaScript-Bibliothek auswählen und implementieren, dann stehen Responsive Images im Frontend zur Verfügung. Welche Responsive-Images-Lösung zum Einsatz kommen soll, lässt sich über die Konstante „styles.content.imgtext.layoutKey“ auswählen. Mögliche Werte sind dabei:
Werte der Konstante styles.content.imgtext.layoutKey
Default Rendering ohne Responsive Images srcset Rendering als Srcset Attribute picture Rendering als Picture Tag data Rendering als Data Attribute
Nachdem die Konstante gesetzt ist, erstellt TYPO3 für jedes eingebundene Bild zwei verschiedene Auflösungen: zwei Bilder mit 600 Pixel Breite, eins für normale Displays und eins für ein Retina-Display.
