Function to use Foundation's Interchange to make WordPress images automatically responsive. Also included is a function to add Interchange to the theme if Foundation is not already being used. http://foundation.zurb.com/docs/components/interchange.html

foundation-interchange.php

add_filter('post_thumbnail_html', 'slug_responsive_img', 5, 5);
//Image sizes for Interchange
add_image_size( 'fd-lrg', 1024, 99999);
add_image_size( 'fd-med', 768, 99999);
add_image_size( 'fd-sm', 320, 9999);

function slug_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
   	//make image links
	$attachment_id = $post_thumbnail_id;
	$default = wp_get_attachment_image_src($attachment_id);
	$size = 'fd-sm';
	$small = wp_get_attachment_image_src($attachment_id, $size);
	$size = 'fd-med';
	$med = wp_get_attachment_image_src($attachment_id, $size);
	$size = 'fd-lrg';
	$lrg = wp_get_attachment_image_src($attachment_id, $size);
	//create image tag with queries
	$html = '<img src="'.$default[0].'"';
	$html .= 'data-interchange="['.$default[0].', (default)],';
	$html .= '['.$small[0].', (only screen and (min-width: 320px))],';
	$html .= '['.$med[0].', (only screen and (min-width: 768px))],';
	$html .= '['.$lrg[0].', (only screen and (min-width: 1024px))],';
	$html .='">';
	return $html;
}

interchange-enqueue.php

function slug_interchange() {
    wp_enqueue_script('foundation-js', get_template_directory_uri().'/js/foundation.js', array('jquery'), false, true);
    wp_enqueue_scripts('foundation-interchange', get_template_directory_uri().'/js/interchange.js', array('jquery', 'foundation-js'), false, true);
    wp_enqueue_style('foundation-style', get_template_directory_uri().'/css/foundation.css');
}
add_action('wp_enqueue_scripts', 'sluge_interchange')

This works really well, however it doesn't include the image alt tag. Is it possible to retrieve the alt tag by including the following? $image_alt = get_post_meta( $image->id, '_wp_attachment_image_alt', true);

I've "hacked" this together, it works but I'm not sure it's the best approach....

add_filter('post_thumbnail_html', 'slug_responsive_img', 5, 5);
//Image sizes for Interchange
add_image_size( 'fd-lrg', 1024, 99999);
add_image_size( 'fd-med', 768, 99999);
add_image_size( 'fd-sm', 320, 9999);
function slug_responsive_img($html, $post_id, $post_thumbnail_id, $size, $attr) {
   	//make image links
	$attachment_id = $post_thumbnail_id;
	$image_alt = trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true )) );
	$default = wp_get_attachment_image_src($attachment_id);
	$size = 'fd-sm';
	$small = wp_get_attachment_image_src($attachment_id, $size);
	$size = 'fd-med';
	$med = wp_get_attachment_image_src($attachment_id, $size);
	$size = 'fd-lrg';
	$lrg = wp_get_attachment_image_src($attachment_id, $size);
	//create image tag with queries
	$html = '<img src="'.$default[0].'"';
	$html .= ' alt="'.$image_alt.'"';
	$html .= ' data-interchange="['.$default[0].', (default)],';
	$html .= '['.$small[0].', (only screen and (min-width: 320px))],';
	$html .= '['.$med[0].', (only screen and (min-width: 768px))],';
	$html .= '['.$lrg[0].', (only screen and (min-width: 1024px))],';
	$html .='">';
	return $html;
}