responsive-images.html

<img data-mob-src="mobile.png" data-desk-src="desktop.png" data-threshold="900" />
<img data-mob-src="mobile.png" data-desk-src="desktop.png" />

<script>
	/*
	RESPONSIVE-IMAGES

	._______________________.                .________.
	||                     ||    /|    |\    |        |
	||                     ||   / '----' \   |        |
	||                     ||  /          \  |        |
	||       DESKTOP       ||  \          /  | MOBILE |
	||                     ||   \ ,----, /   |        |
	||                     ||    \|    |/    |        |
	;L____________________();                ;___()___;

	Just add these attributes to your img tag(s):

	mobile image source:
	data-mob-src="www.x.com/y/mobile.jpg"

	desktop image source:
	data-desk-src="www.x.com/y/desktop.jpg"

	optional responsive threshold:
	data-threshold="900"

	<img data-mob-src="mobile.png" data-desk-src="desktop.png" data-threshold="900" />

	Then include this js at the foot of the page.
	*/

	(function(){

		var instructions = "see uncompressed file for instructions";

		//SETTINGS
		var defaultThreshold = 800;

		//ELEMENTS
		//all img tags with data-mob-src
		var imageList = Array.prototype.slice.call( document.querySelectorAll("img[data-mob-src]") );
		//makes searching easier
		var imgDatabase = [];
		for ( var i = 0; i < imageList.length; i++ ){
			var dataArray = [];
			dataArray[0] = imageList[i].getAttribute("data-threshold") || defaultThreshold;
			dataArray[0] = parseInt(dataArray[0]);
			dataArray[1] = imageList[i].getAttribute("data-mob-src");
			dataArray[2] = imageList[i].getAttribute("data-desk-src");
			dataArray[3] = "unset"; //unset / mobile / desktop
			imgDatabase.push( dataArray );
		}

		//VARIABLES
		var windowWidth;
		ImageRespond();

		//FUNCTIONS
		function Check_Window_Size(){
			return window.innerWidth;
		}

		//SWITCH BETWEEN IMAGE SOURCES
		function ImageRespond(){
			windowWidth = Check_Window_Size();
			for ( var i = 0; i < imgDatabase.length; i++ ){
				if ( imgDatabase[i][0] >= windowWidth ){
					if ( imgDatabase[i][3] !== "mobile" ){
						imageList[i].src = imgDatabase[i][1]; //set to mobile
						imgDatabase[i][3] = "mobile";
					}
				}else{
					if ( imgDatabase[i][3] !== "desktop" ){
						imageList[i].src = imgDatabase[i][2]; //set to desktop
						imgDatabase[i][3] = "desktop";
					}
				}
			}
		}

		if (imageList.length > 0){	
			//WINDOW RESIZE EVENT LISTENER
			var resizeCheckPause = false;
			window.addEventListener("resize", function(){
				if (!resizeCheckPause){

					ImageRespond();

					resizeCheckPause = true;
					window.requestAnimationFrame(function(){
						resizeCheckPause = false;
					});
				}
			});
		}
	})();

</script>