Mobile-first responsive images using jQuery

responsiveImages.html

<img src="/mobile/version.jpg" data-tablet-src="/tablet/version.jpg" data-full-src="/full/version.jpg" alt="Picture" class="responsive">

responsiveImages.js

var w = window.document.width,
sizeTablet = 768,
sizeFull = 1024;

$(document).ready(function() {
	$('img.responsive').each(function(){
		if (w > sizeFull) {
			// serve full size for large screens
			this.src = $(this).attr('data-full-src');
		} else if (w > sizeTablet) {
			// serve middle size for tablets
			this.src = $(this).attr('data-tablet-src');
		} else {
			// wrap image with link to full size on small screens
			var a = $('<a>');
			a.attr('href', $(this).attr('data-full-src'));
			$(this).wrap(a);
		}
	});
});