<picture>
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_1280.jpg" media="(min-width: 1400px)">
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_1034.jpg" media="(min-width: 900px)">
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_745.jpg" media="(min-width: 400px)">
  <source srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40113/beach-1404658-compressed_320.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>
img {
  display: block;
  max-width: 100%;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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