I AM DOING ENHANCING

enhanceftw.markdown

How to enhance, progressively

Take something small and dumb like this:

<img src="my-image.jpg" />

and ENHANCE it with SUPERNESS, like this:

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

Am I doing it right?