Ref : http://www.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/

_rwdImage.scss

// SCSS
.rwdImage {
    position: relative;
    margin:0;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;

	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

rwdImage.js

// javascript
(function (win) {
    'use strict';

    var screenPixelRatio = function () {
        var retVal = 1;
        if (win.devicePixelRatio) {
            retVal = win.devicePixelRatio;
        } else if ("matchMedia" in win && win.matchMedia) {
            if (win.matchMedia("(min-resolution: 2dppx)").matches || win.matchMedia("(min-resolution: 192dpi)").matches) {
                retVal = 2;
            } else if (win.matchMedia("(min-resolution: 1.5dppx)").matches || win.matchMedia("(min-resolution: 144dpi)").matches) {
                retVal = 1.5;
            }
        }
        return retVal;
    },
    getImageVersion = function() {

        var pixelRatio = screenPixelRatio();    
        var width = win.innerWidth * pixelRatio;

        // sizes: small = 320, medium = 640, high = 720
        if (width > 320 && width <= 640) {
            return "medium";
        } else if (width > 640 && pixelRatio > 1) {
            return "high";
        }else if (width > 640) {
            return "x-high";
        } else {
            return "small"; // default version
        }
    },
    lazyloadImage = function (imageContainer) {

        var imageVersion = getImageVersion();

        if (!imageContainer || !imageContainer.children) {
            return;
        }
        var img = imageContainer.children[0];

        if (img) {
            var imgSRC = img.getAttribute("data-src-" + imageVersion);
            var altTxt = img.getAttribute("data-alt");
            if (imgSRC) {
                try {
                    var imageElement = new Image();
                    imageElement.src = imgSRC;
                    imageElement.setAttribute("alt", altTxt ? altTxt : "");
                    imageContainer.appendChild(imageElement);
                } catch (e) {
                    console.log("img error" + e);
                }
                imageContainer.removeChild(imageContainer.children[0]);
            }
        }
    },
    lazyLoadedImages = document.getElementsByClassName("lazy-load");

    for (var i = 0; i < lazyLoadedImages.length; i++) {
        lazyloadImage(lazyLoadedImages[i]);
    }

})(window);

sample.html

/* rwdImage block */
<figure class="rwdImage lazy-load">
    <noscript data-src-small="img/small.png" 
        data-src-medium="img/medium.png" 
        data-src-high="img/high.png" 
        data-src-x-high="img/x-high.jpg"
        data-alt="Image alt value">
        <img class="" src="small.png" alt="">
    </noscript>
</figure>

wordpress.php

<?php
function rwd_image($id='', $title='', $ratio='') {

	// get post id
	$post_id = ( $post_id ) ? $post_id : get_the_id();

	// define images
	$img_full = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'full' );
	$img_large = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'large' );
	$img_medium = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'medium' );
	$img_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($post_id), 'thumbnail' );

	// set default image
	$img_default = $img_thumbnail[0];
	
	// define alt 
	$alt = ( $title ) ? $title : get_the_title($post_id);

	// set img ratio
	$src_ratio = $img_full[2] / $img_full[1] * 100;
	$img_ratio = ( $ratio ) ? $ratio : $src_ratio;

	$html = '<figure class="rwdImage lazy-load" data-ratio="' . $img_ratio . '">';
	$html .= '<noscript data-src-small="' . $img_thumbnail[0] . '"';
	$html .= ' data-src-medium="' . $img_medium[0] .'"';
	$html .= ' data-src-high="' . $img_large[0] . '"';
	$html .= ' data-src-x-high="' . $img_full[0] . '"';
	$html .= ' data-alt="' . $alt . '">';
	$html .= '<img class="" src="' . $img_default. '" alt="' . $alt . '">';
	$html .= '</noscript></figure>';

	return $html;
}