How to edit the srcset attribute in WordPress' responsive images

WordPress 4.4 introduced responsive images by default. If you add an image to your post, WordPress will automatically create a srcset and sizes attribute.

(If you are not familiar with responsive images and thus srcset and sizes I recommend you read my article on this topic.)

The sizes attribute will default to

sizes="(max-width: {{image-width}}px) 100vw, {{image-width}}px"

That means, the sizes attribute tells the browser that if the viewport is as wide as the width of the image the user added or smaller, the image is displayed at 100% viewport width. Otherwise it will just be displayed at it's natural size.
(This is a nice default which is definitely better than not having responsive images at all, but it's also not perfect for every site and image. But that's not the topic of this post. How you can edit the responsive image markup is explained here.)

On my photo blog visuellegedanken.de the sizes markup is exactly what I need, so I don't need to edit any markup.
I display the images at 900px width or at 100vw if the viewport is smaller than 900px. Because I want to have 2x retina images even on the largest viewport, I upload images with a width of 1800px. Makes sense, right?

But WordPress didn't add the 1800px version of my images to the srcset attribute. So today I did some research and found out, that there is a max_srcset_image_width defined in WordPress which defaults to 1600px. This means any image larger than 1600px will not be added to the srcset attribute. This limitation is in place to prevent WordPress from adding ultra large image sources to the srcset.
I'm not sure what I think of this limitation, because the browser will only pick the src which is most appropriate anyway and thus any other ultra large sources won't harm anyone.

Anyhow, there are two ways around this limitation. Either you disable the limitation completely or you set the max width to a value that makes sense to you.

And here is how you do that: Open up your themes functions.php and add on of those functions, depending on what you want to do:

/**
 * Remove max srcset image width
 */
function remove_max_srcset_image_width( $max_width ) {
    return false;
}
add_filter( 'max_srcset_image_width', 'remove_max_srcset_image_width' );

/**
 * Set max srcset image width to 1800px
 */
function remove_max_srcset_image_width( $max_width ) {
    $max_width = 1800;
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'remove_max_srcset_image_width' );

You can even set the $max_width depending on the image which was added to the post:

/**
 * Set max srcset image width to 1800px if the added image is equal to or wider than 900px
 */
function set_max_srcset_image_width( $max_width, $size_array ) {
    $width = $size_array[0];

    if ( $width >= 900 ) {
        $max_width = 1800;
    }

    return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_image_width', 10, 2 );