Nutzungsszenarien des neuen picture-Elements

picture1.html

<!--  Die source-Elemente werden von oben nach unten gelesen. -->
<!--  Alles unter 800px-Breite bekommt also die zweite Source. -->
<!--  Oder das Fallback-Bild, wenn es die Elemente nicht kennt. -->
<picture>
  <source media="(min-width: 800px)"
          srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="Tolle Bildbeschreibung">
</picture>

<picture>
     <source media="(min-width: 1000px)"
             srcset="large.jpg 1x, large-2x.jpg 2x">
     <source media="(min-width: 600px)"
             srcset="medium.jpg 1x, medium-2x.jpg 2x">
     <img src="small.jpg" srcset="small-2x.jpg 2x"
          alt="Tolle Bildbeschreibung">
</picture>

<picture>
     <source media="(min-width: 780px)"
             srcset="medium.jpg 1x, medium-2x.jpg 2x">
     <img src="small.jpg" srcset="small-2x.jpg 2x"
          alt="Tolle Bildbeschreibung">
</picture>

picture2.html

<picture>
    <source media="(max-width: 80em)"
            sizes="(max-width: 30em) 100vw,
             (max-width: 50em) 50vw,
             calc(33vw - 100px)"
            srcset="pic100.jpg 100w, pic200.jpg 200w,
                    pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w,
                    pic3200.jpg 3200w">
    <img src="phew.jpg" alt="Woah, what is this?!">
</picture>

picture3.html

  <picture>
    <source media="(min-width: 70em)"
      srcset="http://lorempixel.com/1120/560"
      class="flexible">
    <source media="(min-width: 55em)"
      srcset="http://lorempizza.com/880/440"
      class="flexible">
    <source media="(min-width: 40em)"
      srcset="http://placekitten.com/640/320"
      class="flexible">
    <source 
      srcset="http://placekitten.com/360/180">
    <img src="http://placehold.it/400x200&text=Fallback" 
         class="flexible" 
         alt="Super toller Beschreibungstext">
  </picture>