Hallo Christian,
entscheidend ist, dass das normale Bild das kleinste sein muss. Meine
Konfiguration:
tt_content.image.20.maxW = 200
tt_content.image.20.1.sourceCollection >
tt_content.image.20.1.sourceCollection {
small {
width = 200
srcsetCandidate = 319w
mediaQuery = (max-width: 319px)
dataKey = small
}
phone {
width = 400
maxW = 400
srcsetCandidate = 599w
mediaQuery = (max-width: 599)
dataKey = phone
}
tablet {
width = 660
maxW = 660
srcsetCandidate =
mediaQuery =
dataKey = tablet
}
tabletRetina {
pixelDensity = 2
width = 1220
maxW = 1220
srcsetCandidate = 2x
mediaQuery =
dataKey = tabletRetina
}
}
Wichtig ist diese Zeile:
tt_content.image.20.maxW = 200
Damit erhalte ich im <img src="kleinsteDatei.jpg" srcset="die größeren Dateien">
Darüber hinaus brauchst du natürlich das passende JavaScript, welches die
Bilder dann auch tauscht. Das hängt davon ab, welche Technik du verwendest.
Diese stellst du ja in den Constants ein, ich habe hier z. B. bei
"REndering-type für responsive images" die Option "img-tag with alternate
sources as srcset-attribute gewählt.
Dazu gehört dann dieses JavaScript: https://github.com/borismus/srcset-polyfill/
OK, das ist wirklich nicht intuitiv - Anleitung bei http://www.lobacher.de:
http://lobacher.de/files/TYPO3-CMS-6.2-LTS-Die-Neuerungen-Lobacher.pdf
irgendwo in der Mitte ...
Gruß
Peter
Am 23.04.2014 um 23:22 schrieb Christian Leicht <use...@schani.com>:
> Hallo,
>
> ich versuche gerade eine Seite mit Responsive Images umzusetzen. Die
> 6.2er Möglichkeiten nutze ich auch, habe aber das Problem das alle
> Bilder in den verschiedenen Auflösungen geladen werden. Wenn ich ein
> Bild auf die Seite stelle wird das Original, das ja überdimensioniert
> in fileadmin abgelegt ist im src des IMG eingetragen. Das bedeutet aber
> auch das das Original geladen wird.
>
> Wenn ich die Seite z.B. mittels tools.pingdom.com prüfe, wird eine große
> Datenmenge der Bilder angezeigt. Auf einer Langsamen Internetverbindung
> macht sich die Ladezeit auch bemerkbar. Auf dem iPhone lädt es auch
> dementsprechend lange. Das Bild hat ja auch im Original 600kB
>
> Sollte dieses src Bild nicht komplett weg sein? Die anderen 3 Bilder in
> srcset existieren zwar auf dem Server, werden aber nicht benutzt. Egal
> in welcher Fenstergröße es wird immer nur das Original Bild angezeigt
> und dann über den img {width: 100%} auf die notwendige Größe skaliert.
>
> <img src="/fileadmin/Bilder%20Dokumente/dummy/Ansicht1.jpg
> <view-source:http://wwl2014.leicht.info/fileadmin/Bilder%20Dokumente/dummy/Ansicht1.jpg>"
>
> srcset="/fileadmin/_processed_/csm_Ansicht1_1dae772559.jpg 300w,
> fileadmin/_processed_/csm_Ansicht1_f1178cb7ea.jpg 600w 2x,
> fileadmin/_processed_/csm_Ansicht1_2664ab2299.jpg 600w" alt="">
>
>
> Muss ich noch ein JS einbinden damit das klappt?
> Irgendwie kann ich mir nicht vorstellen wie das ganze funktionieren soll.
>
> Besten Dank für Infos
>
> Christian
> Mail: use...@schani.com
>
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german@lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
