Outputs HTML for image tags that load a WordPress medium size image on initial load, then a separte javascript file (image_deferred.js) loads in the srcset and sizes attributes.

create_deferred_image_tag.php

/**
 * Helper function for getting the widths and url's of all the available crops of an image.
 * @param  Number $id : The id of the image that you need the info for
 * @param  Array $image_sizes_to_exclude An array of strings with the names of image sizes to exclude from the output
 * @return Array An indexed array, where at each index there is an associative array with array["width"] containing an image width and array["url"] containing the corresponding image url.
 *          Example: Array(
 *                       [0] => Array(
 *                               [width] => 300
 *                               [url] => http://placehold.it/50x50
 *                          ),
 *                      [1] , etc
 */
function get_image_widths_and_urls( $id, $image_sizes_to_exclude = [] )
{
    //Get all the possible image sizes
    $image_size_array = get_intermediate_image_sizes();

    //Filter out sizes we don't want to include
    foreach ( $image_sizes_to_exclude as $image_size_to_exclude ) {
        $size_found_key = array_search( $image_size_to_exclude, $image_size_array );
        if ( $size_found_key !== false ) {
            unset($image_size_array[ $size_found_key ]);
        }
    }

    $image_width_array = [];
    $widths_and_urls = [];
    $i = 0;
    foreach ( $image_size_array as $image_size_name ) {
        $image_info_array = wp_get_attachment_image_src( $id, $image_size_name );
        $is_intermediate_image_size = $image_info_array[ 3 ]; //False if it's the original image, not a scaled version
        if ( $is_intermediate_image_size ) {
            $image_url = $image_info_array[ 0 ];
            $image_width = $image_info_array[ 1 ];
            $image_width_array[] = $image_width;
            $widths_and_urls[] = [
                "width" => $image_width,
                "url" => $image_url,
            ];
        }
        $i++;
    }
    //Get the full size image
    $full_size_image_info_array = wp_get_attachment_image_src( $id, "full" );
    $image_url = $full_size_image_info_array[ 0 ];
    $image_width = $full_size_image_info_array[ 1 ];
    $image_width_array[] = $image_width;
    $widths_and_urls[] = [
        "width" => $image_width,
        "url" => $image_url,
    ];

    array_multisort( $image_width_array, SORT_ASC, SORT_NUMERIC, $widths_and_urls ); //Sorts $widths_and_urls by the "width" key

    return $widths_and_urls;
}


/**
 * Creates an <img> tag that will have a small image load initially (WordPress medium size), then use some Javascript
 * load the larger image src/srcset from top to bottom in the document, so that images at the "top of the fold" are
 * loaded first.
 * @param int $attachment_id The WordPress ID for the image attachment you want to use.
 * @param string $alt_string The alt string that will appear in the <img> tag.
 * @param string $class_string The class string to add to the <img> tag.
 * @param array $sizes_to_exclude An array of String names of WordPress image sizes that you want to exlude from the
 * srcset of the <img>.
 * @param string $sizes_string The string that you want to be the <img>'s "sizes" attribute.
 * @return string   The HTML for the <img> tag as a String.
 */
function create_deferred_img_tag( $attachment_id = -1, $alt_string = '', $class_string = '', $sizes_to_exclude = [], $sizes_string = '' )
{
    //The img's initial "src" attribute will be of the medium size WordPress image
    $attachment_medium_src_array = wp_get_attachment_image_src( $attachment_id, 'medium', false );
    $attachment_medium_src = $attachment_medium_src_array[ 0 ];

    $widths_and_urls = get_image_widths_and_urls( $attachment_id, $sizes_to_exclude );

    //Create srcset string
    $srcset_array = [];
    foreach ( $widths_and_urls as $current_width_and_url ) {
        $image_url = $current_width_and_url[ "url" ];
        $image_width = $current_width_and_url[ "width" ];

        $current_srcset_element = "{$image_url} {$image_width}w";

        $srcset_array[] = $current_srcset_element;
    }
    $srcset_string = implode( ", ", $srcset_array );

    $output = "<img src='{$attachment_medium_src}' class='{$class_string}' data-srcset='{$srcset_string}' data-sizes='{$sizes_string}' alt='{$alt_string}' >";

    return $output;
}