Cacher is the code snippet organizer for pro developers

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
	<div data-src="external/imgs/small.jpg"></div>
	<div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div>
	<div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div>
	<div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div>

	<!-- 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>
	
<script>
	/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with divs). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
	// FROM: http://scottjehl.github.com/picturefill/picturefill.js
	// MORE: http://scottjehl.github.com/picturefill/
	(function(w) {

	    // Enable strict mode
	    "use strict";

	    w.picturefill = function() {
	        var ps = w.document.getElementsByTagName("div");

	        // Loop the pictures
	        for (var i = 0, il = ps.length; i < il; i++) {
	            if (ps[i].getAttribute("data-picture") !== null) {

	                var sources = ps[i].getElementsByTagName("div"),
	                    matches = [];

	                // See if which sources match
	                for (var j = 0, jl = sources.length; j < jl; j++) {
	                    var media = sources[j].getAttribute("data-media");
	                    // if there's no media specified, OR w.matchMedia is supported 
	                    if (!media || (w.matchMedia && w.matchMedia(media)
	                        .matches)) {
	                        matches.push(sources[j]);
	                    }
	                }

	                // Find any existing img element in the picture element
	                var picImg = ps[i].getElementsByTagName("img")[0];

	                if (matches.length) {
	                    if (!picImg) {
	                        picImg = w.document.createElement("img");
	                        picImg.alt = ps[i].getAttribute("data-alt");
	                        ps[i].appendChild(picImg);
	                    }

	                    picImg.src = matches.pop()
	                        .getAttribute("data-src");
	                } else if (picImg) {
	                    ps[i].removeChild(picImg);
	                }
	            }
	        }
	    };

	    // Run on resize and domready (w.load as a fallback)
	    if (w.addEventListener) {
	        w.addEventListener("resize", w.picturefill, false);
	        w.addEventListener("DOMContentLoaded", function() {
	            w.picturefill();
	            // Run once only
	            w.removeEventListener("load", w.picturefill, false);
	        }, false);
	        w.addEventListener("load", w.picturefill, false);
	    } else if (w.attachEvent) {
	        w.attachEvent("onload", w.picturefill);
	    }

	}(this));	
</script>