Wordpress lazysizes implementation for image attachments

wp-lazyresponsive.php

<?
/**
 * Get all the info we can get from a WP attachment
 * @param int $img_id attachment id of the image to obtain the info
 * @return an associative array with all the info of the image
 */
function get_all_image_info($img_id) {
			
      $img = wp_get_attachment_metadata($img_id);
   	  //we add the original source info to the sizes array given in the previous function
      $img["sizes"]["full"] = array(
          "file"=> substr(strrchr($img["file"],"/"),1),
          "width" =>$img["width"],
          "height" =>$img["height"]
        );
      //we put the path for all the images.
      $img["path"]= content_url()."/uploads/".str_replace($img["sizes"]["full"], "", $img["file"]);
      //we set the src for each size
      foreach($img["sizes"] as &$size) {
          $size["src"] = $img["path"].$size["file"];
      }
      //other usefull info
      $img["alt"] = get_post_meta( $img_id, '_wp_attachment_image_alt', true );
      
      $info = get_post($img_id);
      $img["caption"] = $info->post_excerpt;
      $img["description"] = $info->post_content;
      $img["title"] = $info->post_title;
      $img["id"] = $img_id;
    return $img;
}
/**
 * Print or return a responsive lazy image
 * @param int $img_id attachment id of the image to print the html layout for lazysizes
 * @param boolean $echo print the result directly or only returned
 * @returns the picture HTML tag
 */
function lazy_responsive_image($img_id=false,$echo=true) {
	//if no id is given will try to get the thumbnail of the post.
    if (!$img_id) {
      global $post;
      $img_id = get_post_thumbnail_id( $post->ID );
    }
    $result = false;
    //we get all the info from the attachment with my own function.
    $img = get_all_image_info($img_id) );
	//lets create the string with all the sizes
    $images = array();
	foreach ($img["sizes"] as $size) {
		$images[$size["width"]] = $size["src"]." ".$size["width"]."w";
	}
	//reordering by the width
	ksort($images);
	$srcset = implode(",\n",$images);
    ob_start();
?>
<picture>
	<!--[if IE 9]><video style="display: none"><![endif]-->
	<source
		data-srcset="<? echo $srcset?>"
		data-src="<?echo $img["sizes"]["thumbnail"]["src"] ?>" />
	<img
		<? // A generated image to validate?>
		src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="		
		data-sizes="auto"
		data-src="<?echo $img["sizes"]["thumbnail"]["src"] ?>"
		class="lazyload"
		<?if ($img["alt"]) {?>alt="<? echo $img["alt"]; ?>" <? }?>	 
		/>
	<!--[if IE 9]></video><![endif]-->
</picture>
<?
	//we put all the "echoed" data into a variable
    $result = ob_get_clean();
    if ($echo) echo($result);
    return $result;
}
// SHORTCODES
add_shortcode( 'lazy_responsive_img', 'lazy_responsive_img_shortcode');
/**
 * A shortcode to display the lazysizes images
 * @params string ids a comma separated images ids
 * @return a set of html tags with the imgsizes
 */
function lazy_responsive_img_shortcode( $atts ) {
	//returns a msg to alert the img couldn't been found.
	$result = "[lazy_responsive_img can't find the image, sorry]";
	// if no ids given get the featured image
	if (!isset($atts["ids"])) {
	  global $post;
      $atts["ids"] = get_post_thumbnail_id( $post->ID );
	}
	//if we still don't have the ids return the error result
	if ($atts["ids"]) {
		$ids = explode(",", $atts["ids"]);
		//let's populate the result with items
		$result = array();
		foreach ($ids as $img_id) {
			$result[] = lazy_responsive_image($img_id,$echo=false);
		}
		//array to the result string
		$result = implode("\n", $result);
	}
	return $result;
}
// We add the javascript from CDN in the bottom of the page, without it everything else is useless
add_action( 'wp_enqueue_scripts', 'lazysizes_js' );
function lazysizes_js() {
	wp_enqueue_script( 'lazysizes', "//cdnjs.cloudflare.com/ajax/libs/lazysizes/1.3.2/lazysizes.min.js",false,"1.3.2",true );
}

A little Wordpress snippet/plugin to show lazy and responsive images using the lazysizes.js.

Shortcode like this:
[lazy_responsive_img ids="132,109"]

in addintion we have a function to return all possible data from images called get_all_image_info($id).