Use Riloadr and wordpress to create a theme that displays responsive

breakpoints.js

// The names are used to fit into wordpress's naming convention

var featuredImage = new Riloadr({
	breakpoints: [
		{name: '-466x155', maxWidth: 466},
		{name: '-700x233', maxWidth: 700, minWidth: 467},
		{name: '-940x313', maxWidth: 940, minWidth: 701},
		{name: '', minWidth: 940}
	]
});

functions.php

<?php

/**
 * Declare the different multiple image resolutions
 */

function prepare_theme() {
	add_theme_support('post-thumbnails');
	add_image_size('full-feature', 1200, 400, true);
	add_image_size('large-feature', 940, 313, true);
	add_image_size('medium-feature', 700, 233, true);
	add_image_size('mobile-feature', 466, 155, true);
}
add_action('after_setup_theme', 'prepare_theme');

/**
 * Load Wordpress's bundled jQuery, Riloadr and a breakpoints.js file to store the Riloadr config
 */

function add_scripts() {
	wp_enqueue_script(
		'riloadr',
		get_template_directory_uri() . 'jquery.riloadr.min.js',
		array('jquery')
	);
	wp_enqueue_script(
		'breakpoints',
		get_template_directory_uri() . 'breakpoints.js',
		array('riloadr')
	);
}
add_action('wp_enqueue_scripts', 'add_scripts');

index.php

...
<!-- Within the wordpress loop -->
<?php if (has_post_thumbnail()) : ?>
	<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full-feature');
		$info = pathinfo($thumbnail[0]);?>
	<a class="image" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">
		<img class="responsive" data-base="<?php echo $info['dirname']; ?>/" data-src="<?php echo $info['filename']; ?>{breakpoint-name}.<?php echo $info['extension']; ?>" />
	</a>
<?php endif; ?>

...

The themes functions.php file tells wordpress what sizes to create for all the uploaded images.
We also tell wordpress in the functions file to include jQuery and Riloadr as well as a separate file in which to store the Riloadr configuration. These then get included on the public site.
Wherever you then want to use the responsive images you can use pathinfo on the file url and build a custom img tag that is caught using Riloadr.

Really nice job!

You can omit the data-base attribute and set the full path on the data-src attribute:

<img class="responsive" data-src="<?php echo $info['dirname'] .'/'. $info['filename']; ?>{breakpoint-name}.<?php echo $info['extension']; ?>" />