WordPress add responsive srcset header image to theme

WP introduced support for srcset in version 4.4 for Thumbnails and Post images. But I can’t find a way to make the page header responsive. Here is how I embed the Page header:

<img src="<?php header_image() ?>" alt="">  

This loads the header image (which can be uploaded in the backend > Design > Customise) in an src. But I’d rather include all custom image sizes (that I added in functions.php) of this image and put them in an srcset attribute. But there seems to be only one size for the header?

Answer

It won’t be easy, but this is how you make Header images (banner) responsive with a srcset.

ps.: Please fix this, wordpress! Responsive Headers should be part of the srcset update.

Solution: We never use the WP header_image(); function, but instead only just use the custom header as an “Uploader” for our image that we then embed manually:

1. Extract the attachement ID of the Header image
2. Manually load src and srcset of this attachement ID

header.php

<?php
// Extract header attachement ID
$data = get_theme_mod('header_image_data');
$data = is_object($data) ? get_object_vars($data) : $data;
$header_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($header_id) :
    // Set image sources manually
    $src = wp_get_attachment_image_src( $header_id, 'thumbnail-head' )[0];
    $srcset = wp_get_attachment_image_srcset( $header_id, 'thumbnail-head' ); ?>
    <img id="masthead-bg" src="<?php echo $src ?>" srcset="<?php echo $srcset ?>" sizes="100vw" alt="">
<?php endif; ?>

In this example thumbnail-head is my destination image size and aspect ratio. You can use whatever size you want (needs to have a fixed aspect ratio). We now have to add this image size to the functions.php file. In order to get larger sizes of this thumbnail (to embed in the srcset) you also have to add more sizes to the functions.php:

functions.php

add_image_size( 'thumbnail-head', 450, 300, true );   
add_image_size( 'thumbnail-head-2x', 900, 600, true );   
add_image_size( 'thumbnail-head-4x', 1800, 1200, true ); 

My thumbnail size is 450 x 300 pixel (3:2 aspect ratio). So I added a 2x and 4x version. Don’t forget to rebuild thumbnails via plugin.

Finally it’s important to set the dimensions of the custom header image to the largest version of your thumbnail. This is because WP cuts the image down to this size and creates the other sizes afterwords based on this cut down image. In this case search for your custom header in the functions.php and set width and height to 1800 and 1200. We also disable “flex-width” and “flex-height” to force the same aspect ratio as our added image sizes.

functions.php

function fs_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'fs_custom_header_args', array(
        'default-image'          => '',
        'header-text'            => false,
        'default-text-color'     => 'ffffff',
        'width'                  => 1800,
        'height'                 => 1200,
        'flex-width'             => false,
        'flex-height'            => false,
        'wp-head-callback'       => 'fs_header_style',
    ) ) );
}
add_action( 'after_setup_theme', 'fs_custom_header_setup' );