Responsive Images - Fallback-img wird immer geladen

[Cebe]

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:

<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

[Spooky]

Bei den neuesten iOS Versionen sollte das Polyfill nicht greifen: http://caniuse.com/#feat=picture

[andreasisaak]

In der Regel greife ich für solche Fälle zum transparenten Data-URL zurück:

<picture>
    <source srcset="../img/sample.svg" media="(min-width: 768px)" />
    <img srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        alt="Sample pic" />
</picture>

https://github.com/scottjehl/picturefill#the-gotchas

Das würde ich aber für Elemente above the Fold nicht empfehlen. Du wirst bei Tools wie Pagespeed, Gmetrix etc die Bilder gar nicht mehr sehen und es mindert das "First responsive time" Feeling deutlich weil der Polyfill erstmal greifen muss und dann erst das Bild ausgetauscht wird. Für Headbanner würde ich es daher in Kauf nehmen das Bilder doppelt geladen werden. Dafür nimmt man ja im src des img das kleinste verfügbare Bild.