Test picture source mit Polyfill.js

Hier kommt das Javascript Picturefill zum Einsatz. gzipt 5.3kb, async
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

Testimage einzigstes Alt Attribut
# 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>

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

Testimage einzigstes Alt Attribut
<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>