Picturefill 2.2.0 Demo for Princess Zelda

Suggested Reading

• Picturefill 2
• Eric Portis's Post on srcset and sizes
• Tim Wright's Article on Picturefill

Demo for img tag

Code Snippet

    <img  sizes="80vw"
             srcset="http://placehold.it/320x400/1B4D26/D1C265&text=Welcome+to+Hyrule+320w 320w,
                     http://placehold.it/480x400/D1C265/1B4D26&text=Welcome+to+Hyrule+480w 480w,
                     http://placehold.it/640x500/1B4D26/D1C265&text=Welcome+to+Hyrule+640w 640w, 
                     http://placehold.it/840x500/D1C265/1B4D26&text=Welcome+to+Hyrule+840w 840w, 
                     http://placehold.it/1040x500/1B4D26/D1C265&text=Welcome+to+Hyrule+1040w 1040w"
             alt="Hey Listen! Turn on your Javascript to view the placeholder!">
  

Demo for picture tag

Code Snippet

    <picture>
    <!-- Add Fallback for IE9 -->
    <!--[if IE 9]><video style="display: none;">
        <source srcset="http://placehold.it/1040x500/1B4D26/D1C265&text=Welcome+to+Hyrule+1040w" 
             media="(min-width: 1000px)">
        <source srcset="http://placehold.it/840x500/D1C265/1B4D26&text=Welcome+to+Hyrule+840w" 
             media="(min-width: 800px)">
        <source srcset="http://placehold.it/640x500/1B4D26/D1C265&text=Welcome+to+Hyrule+640w" 
             media="(min-width: 600px)">
        <source srcset="http://placehold.it/480x400/D1C265/1B4D26&text=Welcome+to+Hyrule+480w" 
             media="(min-width: 400px)">
        <source srcset="http://placehold.it/320x400/1B4D26/D1C265&text=Welcome+to+Hyrule+320w" 
             media="(max-width: 320px)">
      <!--[if IE 9]></video>
      <!-- Add <img> fallback -->
        <img srcset="http://placehold.it/640x500/1B4D26/D1C265&text=Welcome+to+Hyrule+640w" 
         alt="Hey Listen! Turn on your Javascript to view the placeholder!">
    </picture>