gistfile1.html

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  <div data-src="small.jpg"></div>
  <div data-src="small.jpg"         data-media="(min-device-pixel-ratio: 2.0)"></div>
  <div data-src="medium.jpg"        data-media="(min-width: 400px)"></div>
  <div data-src="medium_x2.jpg"     data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></div>
  <div data-src="large.jpg"         data-media="(min-width: 800px)"></div>
  <div data-src="large_x2.jpg"      data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></div>  
  <div data-src="extralarge.jpg"    data-media="(min-width: 1000px)"></div>
  <div data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></div> 
  
  <!--[if (lt IE 9) & (!IEMobile)]>
    <div data-src="medium.jpg"></div>
  <![endif]-->
  
  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  <noscript>
    <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  </noscript>
</div>