Test picture source mit RespImages.js

Hier kommt das Javascript RespImages zum Einsatz. gzipt 4.2kb, async
Gleiches Markup der Images wie Picturefill!
Die einzige Crossbrowserlösung, statt alle anderen HTML5 Möglichkeiten.
Klappt sogar prima im iPad. https://scottjehl.github.io/picturefill/

Große zuerst - und media min-width

# Größere Images zuerst wenn media min-width.
# Bei max-width kommen die kleineren zuerst!
<picture>
  <source srcset="images/glacier-1600.jpg" media="(min-width: 1330px)">
  <source srcset="images/glacier-1200.jpg" media="(min-width: 890px)">
  <source srcset="images/glacier-800.jpg"  media="(min-width: 445px)">
  <source srcset="images/glacier-400.jpg"  media="(max-width: 444px)">
  <img srcset="images/glacier-1600.jpg" alt="Testimage einzigstes Alt Attribut">
</picture>

https://scottjehl.github.io/picturefill/

Umgedreht - kleine zuerst und media max-width - Ist mir lieber

<picture>
  <source srcset="images/glacier-400.jpg" media="(max-width: 445px)">
  <source srcset="images/glacier-800.jpg" media="(max-width: 890px)">
  <source srcset="images/glacier-1200.jpg"  media="(max-width: 1330px)">
  <source srcset="images/glacier-1600.jpg"  media="(min-width: 1331px)">
  <img srcset="images/glacier-1600.jpg" alt="Testimage einzigstes Alt Attribut">
</picture>