Minimal picture size with picturefill.js

Example on how to use picturefill.js for serving out images depending on viewport. https://github.com/scottjehl/picturefill

<!doctype html>
<html>
  <head>
    <script>
      // Picture element HTML5 shiv
      document.createElement( "picture" );
    </script>
    <script src="picturefill.js" async></script>
  </head>
  <body>
          <picture>
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            <source srcset="camp-site-lrg.jpeg" media="(min-width: 992px)">
            <source srcset="camp-site.jpeg" media="(min-width: 641px)">
            <source srcset="camp-site-small.png" media="(min-width: 0px)">
            <!--[if IE 9]></video><![endif]-->
            <img srcset="camp-site-lrg.jpeg" alt="alt text goes here" class="img-responsive">
              <noscript>
                  <img class="img-responsive" src="camp-site-lrg.jpeg" alt="alt text goes here" />
                </noscript>
          </picture>
  </body>
</html>

Add your comment