[TYPO3-german] Responsive Images

[Peter Linzenkirchner]

Hallo Björn, 

>  Die Lösung mit dem Media-Queries gefällt mir
> am Besten (anstelle der JS-Lösung). Hattest du die auch erprobt?

Da geht jetzt was durcheinander glaube ich … die Media Queries brauchst du immer, wenn du CSS für verschiedene Ausgabegrößen/Devices haben willst. Media Queries wirken nur auf CSS (sie sind ja CSS). Damit kannst du dann die Bilder je nach Monitorgröße skalieren aber nicht verkleinern (KB) und auch nicht tauschen. Media Queries sind sozusagen das Allround-Werkzeug, das man immer benötigt. 

JavaScript brauchst du, wenn du zusätzlich Bilder nachladen willst: entweder responsiv (also die Bilder abhängig von der Devicegröße laden) oder Lazy (Bilder laden, wenn sie in den Focus kommen). Oder beides gleichtzeitig. Beides geht mit CSS bzw. Media Queries nicht, das geht nur mit JavaScript. 

Adaptive Images braucht auch ein Javascript, allerdings nur ein sehr kurzes, das die Bildschirmgröße abfragt und ein Cookie setzt. Dieses JavaScript muss in den Head, so weit nach oben wie möglich, damit es ausgeführt wird, bevor die Bilder laden. 

Sprachlich würde ich trennen zwischen: 
- skalieren (über CSS kleiner machen - das, was du als Browser-Skalierung bezeichnest: Media Queries)
- responsiv (Bilder austauschen je nach Device-Größe: Media Queries und JavaScript)
- lazy loading (Bilder nachladen, wenn sie im Focus sind: JavaScript)
und man kann natürlich alles drei kombinieren: dann werden auf kleinen Devices kleinere Bilder erst dann geladen, wenn sie auf dem Monitor erscheinen und zusätzlich an die Devicegröße angepasst. 

Adaptive Images wird zusätzlich mit Skalierung kombiniert (Media Queries sind also in allen Versionen ein Muss), oft auch mit Lazy Loading, aber in der Regel nicht mit responsiv. 

Gruß
Peter

--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia