Responsive Images

We’ve defined several different images sizes through our functions.php file via add_image_size( … ); which provides us with the options we need when adding featured images through Widgets. However, when we view a featured image on a post and/or page, we are noticing a bunch of additional srcset attributes being set in the html source code, one for each image size defined.

I don’t see this occurring in other Genesis/WP sites I’ve investigated. What is causing this behavior and is it normal?

See supporting DOCS below. Thanks.

Gregory

//* Add new featured image sizes
add_image_size( 'home-bottom', 150, 100, TRUE );
add_image_size( 'home-top', 400, 200, TRUE );

// Add featured image sizes
add_image_size( 'entry-image', 650 );
add_image_size( 'featured-small', 320 );

// Add other useful image sizes for use through Add Media modal
add_image_size( 'small-width', 320 );
add_image_size( 'medium-width', 480 );
add_image_size( 'podcast', 200, 200 );
add_image_size( 'twitter-in-stream', 506, 253 );
add_image_size( 'facebook-link-timeline', 484, 252 );
add_image_size( 'facebook-link-page', 470, 246 );
add_image_size( 'facebook-image-timeline', 504, 0 );
add_image_size( 'facebook-image-page', 470, 470 );
add_image_size( 'front-page-hero', 1200, 9999 );
add_image_size( 'podcast-thumbnail', 200, 9999 );
add_image_size( 'podcast-feature', 300, 300 );
add_image_size( 'portfolio', 300, 200 );
add_image_size( 'slider', 1200, 500 );

// Register the image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'sg_custom_sizes' );
function sg_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'featured-large' => __( 'Featured Large' ),
        'featured-small' => __( 'Featured Small' ),
        'small-width' => __( 'Small Width' ),
        'medium-width' => __( 'Medium Width' ),
        'podcast' => __( 'Podcast' ),
        'twitter-in-stream' => __( 'Twitter In Stream' ),
        'facebook-link-timeline' => __( 'Facebook Link Timeline' ),
        'facebook-link-page' => __( 'Facebook Link Page' ),
        'facebook-image-timeline' => __( 'Facebook Image Timeline' ),
        'facebook-image-page' => __( 'Facebook Image Page' ),
        'front-page-hero' => __( 'Front Page Hero' ),
        'podcast-thumbnail' => __( 'Podcast Thumbnail' ),
        'podcast-feature' => __( 'Podcast Feature' ),
        'portfolio' => __( 'Portfolio' ),
        'slider' => __( 'Slider' ),
    ) );
}

And here’s a screenshot of the produced source:

https://www.dropbox.com/s/ynpfctlevddvrt0/wpAddImage.PNG?dl=0