Picturefill Demo und Test

Hier werden je nach Fenster- oder Screenbreite unterschiedlich große Bilder geladen.
Das hat mit Retina gar nix zu tun. Leider...

Alt-Text gilt für alle 
<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="images/amicar-1000x750.jpg" media="(min-width: 1200px)">
  <source srcset="images/amicar-800x600.jpg" media="(min-width: 1000px)">
  <source srcset="images/amicar-600x450.jpg" media="(min-width: 800px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="images/amicar-400x300.jpg" alt="Alt-Text gilt für alle">
</picture>

Hier werden 4 Fotos eingesetzt. Es wird aber nur das geladen, das zum min-width Attribut passt!

Vorteile:

  • Braucht kein jQuery und kann dadurch async geladen werden

Nachteile:

  • Gewürge für IE9 mit video
  • Ohne JS ist nur der ALT-Text zu sehen. Kein Bild.
  • Browser die kein srcset unterstützen laden alle Bilder vom Server = zusätzliche Requests.

Fazit:

  • Funktioniert gut. Wenn man mit den Nachteilen leben will.
  • Und wie verquickt man das nun mit @2 Retina Mist?

Quellen: