WordPress function to create HTML5 image element with 'srcset' and 'sizes' attributes for JPEGs and PNGs. Paste in to functions.php for use elsewhere in theme.

apprch-wp-srcset.php

/**
* WordPress function to create HTML5 image element with 'srcset' and 'sizes' attributes for JPEGs and PNGs. 
* Paste in to functions.php for use elsewhere in theme. Images in 'srcset' are created from all WordPress registered image sizes.
* Mime types 'image/jpg', 'image/png', and 'image/gif' are returned appropriately.
*
* @author Piper Haywood <[email protected]>
* @link http://piperhaywood.com
* @link https://gist.github.com/piperhaywood/96ac07ea5f4999512275
* 
* @example https://gist.github.com/piperhaywood/686cc0c788bd9fc3fa6e
* 
* @param int|string $image_id (required) ID of the desired attachment. Default: none 
* @param string $img_src (optional) Name of the registered image size (i.e. thumbnail, medium, large, full) to be used in the image 'src' attribute. Default: full 
* @param string $img_sizes (optional) String indicating media queries for use in image 'sizes' attribute. Default: 100vw
* @param string $class (optional) String of classnames for the image 'class' attribute. Default: empty string
* 
* @return string $img Returns formatted image element string with 'src', 'alt' and 'class'. Returns 'srcset' and 'sizes' attributes for relevant image filetypes (JPEGs and PNGs at time of development). Returns an empty string if no 'src' is defined. 
* 
*/

function apprch_wp_srcset( $image_id, $src_size = 'full', $img_sizes = '100vw', $class = '' ) {
    
    $alt = '';
    $mime = '';
    $image_src = array();
    $src = '';
    $wp_sizes = array();
    $wp_size = '';
    $srcset_arr = array();
    $srcset = '';
    $image = '';
    
    if( $image_id ) {
        
        $alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
        $alt = !empty($alt) ? $alt : '';
        
        $mime = get_post_mime_type( $image_id );
        if( $mime === 'image/gif' ) { // GIFs require full image size for 'src' and no 'srcset'
            
            $image_src = wp_get_attachment_image_src( $image_id, 'full' );
            $src = $image_src[0];
            
        } elseif( $mime === 'image/jpeg' || $mime === 'image/png' ) { // JPGs and PNGs allowed 'srcset'
            
            $image_src = wp_get_attachment_image_src( $image_id, $src_size );
            $src = $image_src[0];
            
            $wp_sizes = get_intermediate_image_sizes();
            foreach( $wp_sizes as $wp_size ) {
                
                $size_src = wp_get_attachment_image_src($image_id, $wp_size);
                if ( !empty( $size_src ) ) {
                    
                    $width = $size_src[1];
                    $url = $size_src[0];
                    $srcset_arr[$width] = $url;
                    
                }
            }
            
            if( !empty( $srcset_arr ) ) {
                
                ksort( $srcset_arr );
                foreach( $srcset_arr as $width => $size ) {
                    
                    $srcset .= $size . ' ' . $width . 'w, '; 
                    
                }                
            }
            
            $srcset = !empty( $srcset ) ? ' srcset="' . trim( $srcset, ', ' ) . '"' . ' sizes="' . $img_sizes . '"' : '';
            
        }
        
        $image = !empty( $src ) ? '<img class="' . $class . '" alt="' . $alt . '"' . $srcset . ' src="' . $src . '">' : ''; 
        
    }
    
    return $image;
    
}