Drupal7 picturefill implementation with imagecache

node.tpl.php

// snippet used in a node.tpl (with only two image sizes instead of three)

	foreach ($content['field_gallery_image']['#items'] as $image){
		$medium_image = image_style_url('medium', $image['uri']);
		$large_image = image_style_url('large', $image['uri']);
		$alt = $image['alt'];
	
		print '<div data-picture data-alt="'.$alt.'">
					<div data-src="'.$medium_image.'"></div>
					<div data-src="'.$large_image.'" data-media="(min-width: 481px)"></div>

					<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
					<noscript><img src="'.$medium_image.'" alt="'.$alt.'"></noscript>
				</div>';
	}

views-field-image.tpl.php

// views override tpl for an imagefield 
// Note: no alt text in this version because this slideshow was a design element and had no content value


foreach ($row->field_field_image as $image){
	$small_image = image_style_url('medium', $image['raw']['uri']);
	$medium_image = image_style_url('large', $image['raw']['uri']);
	$large_image = image_style_url('giant', $image['raw']['uri']);
	
	print '<div data-picture class="front-image" id="front-node-'.$row->nid.'">
			<div data-src="'.$small_image.'"></div>
			<div data-src="'.$medium_image.'" data-media="(min-width: 481px)"></div>
			<div data-src="'.$large_image.'" data-media="(min-width: 701px)"></div>

			<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
			<noscript><img src="'.$small_image.'"></noscript>
		</div>';
		
	
}

No memory of why the views tpl includes a unique ID for each image. I'm sure it was very important at the time!