Drupal 7 : Responsive image with <picture>

<?php /** * Image styles based on Foundation 6 media queries. * * HTML <picture> element * @see : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture * * Polyfill * @see : http://scottjehl.github.io/picturefill * **/ ?> <?php if(isset($content['field_foo']['#items'])) : ?> <?php // $image = array of attributes $image = $content['field_foo']['#items'][0]; // Array of image styles -- config path : .../config/media/image-styles // Uploaded image width > 1920 $image_styles = array( 0 =>'origin', // No scale 1 =>'up_xxlarge', // Style : scale 1920 2 =>'up_xlarge', // Style : scale 1440 3 =>'up_large', // Style : scale 1280 -- Default 4 =>'up_medium', // Style : scale 1024 5 =>'up_small', // Style : scale 640 ); ?> <picture> <source media="(min-width:120em)" srcset="<?php print image_style_url($image_styles[0],$image['uri']) ?>"> <source media="(min-width:90em)" srcset="<?php print image_style_url($image_styles[1],$image['uri']) ?>"> <source media="(min-width:75em)" srcset="<?php print image_style_url($image_styles[2],$image['uri']) ?>"> <source media="(min-width:64em)" srcset="<?php print image_style_url($image_styles[3],$image['uri']) ?>"> <source media="(min-width:40em)" srcset="<?php print image_style_url($image_styles[4],$image['uri']) ?>"> <source srcset="<?php print image_style_url($image_styles[5], $image['uri']) ?>"> <img src="<?php print image_style_url($image_styles[3], $image['uri']) ?>" alt="<?php print $image['alt']; ?>"> </picture> <?php endif; ?>