Strange img srcset behaviour

Question

I'm using ACF to output some images. One image field fits the full width of my website (1024px), the second image field is a third of the full width (328px).

ACF doesn't currently support img srcset, so I'm using the following helper via my functions.php file:

function responsive_image($image_id,$image_size,$max_width){

    // check the image ID is not blank
    if($image_id != '') {

        // set the default src image size
        $image_src = wp_get_attachment_image_url( $image_id, $image_size );

        // set the srcset with various image sizes
        $image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );

        // generate the markup for the responsive image
        echo 'src="'.esc_url($image_src).'" srcset="'.esc_attr($image_srcset).'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';

    }
}

I then output the image within my theme like so:

<!-- Full width image -->
<img <?php responsive_image(get_field( 'full_img' ), 'full', '1024px'); ?> >

<!-- Third width image -->
<img <?php responsive_image(get_field( 'third_img' ), 'square', '540px'); ?> >

The third width image is set to 540px as that's the full width of my mobile view.

The full width image on the front-end outputs the following:

<img 
    src="full-1024x450.jpg"
    srcset="full-1024x450.jpg 1024w,
            full-768x338.jpg 768w" 
    sizes="(max-width: 1024px) 100vw, 1024px"
>

The third width image on the front-end outputs the following:

<img 
    src="third-540x540.jpg"
    srcset="third-540x540.jpg 540w,
            third-150x150.jpg 150w,
            third-300x300.jpg 300w,
            third-768x768.jpg 768w,
            third-1024x1024.jpg 1024w, 
            third.jpg 1080w" 
    sizes="(max-width: 540px) 100vw, 540px"
>

Here are my theme's image sizes via functions.php:

add_image_size( 'full', 1024, 450, true ); // Upload @ 2048px by 900px for HD
add_image_size( 'square', 540, 540, true ); // Upload @ 1080px by 1080px for HD
add_image_size( 'tall', 328, 677, true ); // Upload @ 656px by 1354px for HD

What I'm really strugging to understand is why my full width image is only outputting 3 image sizes. The images have been sized correctly and are present in the uploads directory. This is a problem for screens with a DPR of 2 or above.

I've tried increasing the max image via Settings > Media, but this doesn't help.

Any ideas?

Answer 1

After some further digging, I discovered that the max srcset size in WordPress 4.4 is set to 1600px wide by default. You can fix this by adding the following filter:

add_filter( 'max_srcset_image_width', 'max_srcset_image_width', 10 , 2 );
function max_srcset_image_width() {
    return 2048;
}

The helper function and this information is thanks to: http://aaronrutley.com/responsive-images-in-wordpress-with-acf