Dynamic 64base encoded gif placeholder for Wordpress images + Lazysizes.js

example.php

<?php

echo '<img class="lazyload" 
           src="'.m_placehoder($image,"medium").'"
           data-sizes="auto" 
           data-srcset="'.$image["sizes"]["huge"].' 1920w,
                        '.$image["sizes"]["large"].' 1024w,
                        '.$image["sizes"]["medium"].' 768w,
                        '.$image["sizes"]["small"].' 480w"
           alt="'.get_bloginfo('name').' - '.$image["title"].'"
           width="'.$image["sizes"]["medium-width"].'"
           height="'.$image["sizes"]["medium-height"].'"/>'; 
?>

function.php

<?php
/* 
   mosne placeholder generator
   http://placeholder.mosne.it/
    
*/

function mosne_placehoder_gen($a, $b) {

  $ok_b = 10;
  if ($a == "") {$a=1;}
  if ($b == "") {$b=1;}
  $d=bcdiv($a, $b, 2);
  if ($d == 0) {$d=1; $ok_b = 1;}elseif ($d == 1) { $ok_b = 1;}
  $ok_a = round($ok_b*$d);

  $im = imagecreatetruecolor($ok_a, $ok_b);
  $black = imagecolorallocate($im, $r, $g, $b);
  imagefill($im, 0, 0, $black);
  imagecolortransparent($im, $black);
  ob_start();
  imagegif($im);
  $img = ob_get_contents();
  ob_end_clean();
  return 'data:image/' . $type . ';base64,' . base64_encode($img);

}

function filter_wp_generate_attachment_metadata( $metadata, $attachment_id ){
    
    $sizes = $metadata["sizes"];
    $metadata["mosneph"]["mosneph"] = mosne_placehoder_gen($metadata["width"], $metadata["height"]); 
    
    foreach ($sizes as $k => $sz){
        $metadata["mosneph"][$k] = mosne_placehoder_gen($sz["width"], $sz["height"]);
    } 
    
    update_post_meta( $attachment_id, '_wp_attachment_metadata', $data);
    return $metadata;

}

add_filter( 'wp_generate_attachment_metadata', 'filter_wp_generate_attachment_metadata', 10, 2 );

function m_placehoder($image,$sz="mosneph"){
    
   if ($image){
      $meta = wp_get_attachment_metadata($image["id"]);
      $out = $meta["mosneph"][$sz];
      if ($out==""){
        $out = $meta["mosneph"]["mosneph"];
      }
      return $out;
   }
}
?>

image_meta_array_example.txt

Array
(
    [width] => 1900
    [height] => 1140
    [file] => 2015/08/sizes-05_1900.jpg
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [file] => sizes-05_1900-150x150.jpg
                    [width] => 150
                    [height] => 150
                    [mime-type] => image/jpeg
                )

            [medium] => Array
                (
                    [file] => sizes-05_1900-768x461.jpg
                    [width] => 768
                    [height] => 461
                    [mime-type] => image/jpeg
                )

            [large] => Array
                (
                    [file] => sizes-05_1900-1536x922.jpg
                    [width] => 1536
                    [height] => 922
                    [mime-type] => image/jpeg
                )

            [cover] => Array
                (
                    [file] => sizes-05_1900-720x405.jpg
                    [width] => 720
                    [height] => 405
                    [mime-type] => image/jpeg
                )

            [square] => Array
                (
                    [file] => sizes-05_1900-480x480.jpg
                    [width] => 480
                    [height] => 480
                    [mime-type] => image/jpeg
                )

            [nano] => Array
                (
                    [file] => sizes-05_1900-160x96.jpg
                    [width] => 160
                    [height] => 96
                    [mime-type] => image/jpeg
                )

            [small] => Array
                (
                    [file] => sizes-05_1900-640x384.jpg
                    [width] => 640
                    [height] => 384
                    [mime-type] => image/jpeg
                )

        )

    [image_meta] => Array
        (
            [aperture] => 0
            [credit] => 
            [camera] => 
            [caption] => 
            [created_timestamp] => 1380722726
            [copyright] => 
            [focal_length] => 0
            [iso] => 0
            [shutter_speed] => 0
            [title] => Print
            [orientation] => 0
        )

    [mosneph] => Array
        (
            [thumbnail] => data:image/;base64,R0lGODlhCgAKAIAAAP///wAAliH5BAEAAAEALAAAAAAKAAoAAAIIjI+py+0PYysAOw==
            [medium] => data:image/;base64,R0lGODlhEAAKAIAAAP///wABzSH5BAEAAAEALAAAAAAQAAoAAAILjI+py+0Po5y0rgIAOw==
            [large] => data:image/;base64,R0lGODlhEAAKAIAAAP///wADmiH5BAEAAAEALAAAAAAQAAoAAAILjI+py+0Po5y0rgIAOw==
            [cover] => data:image/;base64,R0lGODlhEQAKAIAAAP///wABlSH5BAEAAAEALAAAAAARAAoAAAILjI+py+0Po5y01gIAOw==
            [square] => data:image/;base64,R0lGODlhCgAKAIAAAP///wAB4CH5BAEAAAEALAAAAAAKAAoAAAIIjI+py+0PYysAOw==
            [nano] => data:image/;base64,R0lGODlhEAAKAIAAAP///wAAYCH5BAEAAAEALAAAAAAQAAoAAAILjI+py+0Po5y0rgIAOw==
            [small] => data:image/;base64,R0lGODlhEAAKAIAAAP///wABgCH5BAEAAAEALAAAAAAQAAoAAAILjI+py+0Po5y0rgIAOw==
        )

)

output.html

<img class="lazyload" 
     src="data:image/;base64,R0lGODlhEAAKAIAAAP///wABzSH5BAEAAAEALAAAAAAQAAoAAAILjI+py+0Po5y0rgIAOw=="
     data-sizes="auto" 
     data-srcset="http://mysite.mosne.it/wp-content/uploads/2015/08/sizes-02_1900.jpg 1920w,
                  http://mysite.mosne.it/wp-content/uploads/2015/08/sizes-02_1900-1536x922.jpg 1024w,
                  http://mysite.mosne.it/wp-content/uploads/2015/08/sizes-02_1900-768x461.jpg 768w,
                  http://mysite.mosne.it/wp-content/uploads/2015/08/sizes-02_1900-640x384.jpg 480w"
     alt="Mysite - Example"/>