Hallo,
das hier ist weniger ein Problem mit Contao selbst, als ein Problem mit dem picture-Element und dem Responsive Images Polyfill.
Wenn ein Picture-element mit einem Fallback img eingebunden wird wie folgt:
HTML-Code:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="big.jpg" media="(min-width: 400px)">
<source srcset="medium.jpg" media="(min-width: 300px)">
<source srcset="small.jpg" media="(min-width: 200px)">
<!--[if IE 9]></video><![endif]-->
<img src="fallback.jpg" alt="alt">
</picture>
wird logischerweise in Browsern, in denen das Polyfill greifen muss, das fallback.jpg IMMER geladen (getestet auf iPhone 5S, iPhone 6, iPhone 6S), auch wenn der Viewport über 400px breit ist. Da der Browser ja noch nicht weiß, dass er eigentlich ein anderes Bild laden sollte.
Was dazu führt, dass auf diesen Browsern 2 Bilder statt nur einem Bild geladen werden - das fallback.jpg und z.B. das big.jpg. Ich benutze Responsive Images in aller Regel, um die Datenmenge besonders für mobile Browser zu verringern. Wenn die Bilder doppelt geladen werden, ist das natürlich suboptimal.
Nun zu meiner Frage: Hat jemand von euch dieses Problem bereits beobachtet und wenn ja, habt ihr es irgendwie in den Griff bekommen?
Ich habe bisher zwei Ansätze gefunden:
- Die Fallback-img src leer lassen und mit javascript füllen wenn das Polyfill bereits ausgeführt wurde. ( Problem: leeres src-Attribut beim img-Tag ist unzulässig )
- object statt img als Fallback verwenden. ( Problem: etwas hacky und unsauber, zudem bin ich mir nicht sicher, was für Auswirkungen das SEO-technisch hat )
Grüße,
Cebe
Lesezeichen