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; ?>

...

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']; ?>" />