<figure class="toaster">
<picture>
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_1280_bw.jpg" media="(min-width: 1400px)">
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_1034_bw.jpg" media="(min-width: 900px)">
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_745_bw.jpg" media="(min-width: 400px)">
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_320_bw.jpg" media="(min-width: 0px)">
  
  <img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_745" alt="Life is a beach">
</picture>
</figure>
img {
  display: block;
  max-width: 100%;
  width: 100%;
}
figure {
  margin: 0;
}

External CSS

  1. https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css

External JavaScript

  1. https://cdn.rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js