image-set() & srcset demo

index.html

<article class="sandbox">
  <header>
    <h1>Demo of <code>image-set()</code> and <code>srcset</code></h1>
  </header>
  
  <section class="image-set">
    
    <h2><code>image-set()</code></h2>
    
    <!-- 1. normal use case, bg images -->
    <i class="image-set-one"></i>
    
    <!-- 2. image "element" -->
    <i class="image-set-two" style="content: url('http://cl.ly/JGCU/icon1x.png'); content: -webkit-image-set(url('http://cl.ly/JGCU/icon1x.png') 1x, url('http://cl.ly/JFp6/icon2x.png') 2x);"></i>
    
  </section>
  <section class="srcset">
    
    <h2><code>srcset</code></h2>
    
    <!-- no browser support yet -->
    <img alt="srcset icon" src="http://cl.ly/JGCU/icon1x.png" srcset="http://cl.ly/JFp6/icon2x.png 2x, http://cl.ly/JFp6/icon2x-hd.png 2x 640w" />
    
  </section>
  <footer>
    <ol>
      <li><sup>1</sup> <a href="http://www.html5rocks.com/en/mobile/high-dpi/">High DPI Images for Variable Pixel Densities</a> by @smus</li>
      <li><sup>2</sup> <a href="http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/">Safari 6 and Chrome 21 add image-set to support retina images</a> by @cloudfour</li>
      <li><sup>3</sup> <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset">whatwg: srcset</a></li>
    </ol>
  </footer>
</article>

style.sass

@import "compass"
.image-set-one
  background-image: url('http://cl.ly/JGCU/icon1x.png')
  background-image: -webkit-image-set(url('http://cl.ly/JGCU/icon1x.png') 1x, url('http://cl.ly/JFp6/icon2x.png') 2x)
  display: inline-block
  height: 128px
  margin-right: 3em
  width: 128px
  vertical-align: middle

.image-set-two
  display: inline-block
  height: 128px
  width: 128px
  vertical-align: middle

Rendered (on Codepen): http://codepen.io/keithchu/pen/nFmlb