<picture>
  <source 
    media="(max-width: 799px)" 
    data-piio="https://s3-us-west-2.amazonaws.com/co.piio.app/blog/backpack-mobile.jpg"     
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
  <source 
    media="(min-width: 800px)" 
    data-piio="https://s3-us-west-2.amazonaws.com/co.piio.app/blog/backpack-desktop.jpg"
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
  <img 
    data-piio="https://s3-us-west-2.amazonaws.com/co.piio.app/blog/backpack-desktop.jpg"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
</picture>

<script src="https://js.piio.co/piio/piio.min.js"></script>
picture, img {
  width:100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.