Twenty Seventeen: Header Image used is smaller than 2000x1200px

[transl8or]

This is also reported in the Alpha/Beta Forum and I could reproduce it on my localhost:

• Went to Customize > Header Media > Header Image + Add new image
• Uploaded a 2,5 MB image with 3840x2160 px
• Cropped the image (no adjustment of the suggested frame)
• The file that is than used as header image is 768x461 px (37 kB) and stretched. Slightly blurry.

But the image is availabe with 2000x1200 px in the upload folder.
When I use this from the media library as featured image for a post, the bigger 2000x1220 px picture (170kb) is used there, and not the smaller one, like the header does.

Going to the Customizer and choosing another already uploaded image as header image with 2000x1200 px and not cropping it, does also use the 768x461 px file variant as header image.

[joemcgill]

Hi @transl8or – thanks for the report!

This looks to be an issue of the sizes attribute being calculated incorrectly, resulting in the browser downloading the wrong resource. 38847.diff​ adds a filter to the markup generated by get_header_image_tag() to correct this problem.

Before the filter, the img contained:
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"

And after:
sizes="100vw"

[davidakennedy]

Thanks for the report @transl8or! Great catch!

Thanks for the patch @joemcgill. The:

@since 4.7.0

should be:

@since Twenty Seventeen 1.0

Otherwise, it looks good.

[davidakennedy]

Updates @since block.

[davidakennedy]

In 39291:

Twenty Seventeen: Ensure the use of proper image size for custom header image

The sizes attribute was calculated incorrectly, resulting in the browser downloading the wrong resource. This filters the attribute to correct that.

Before the filter, the img contained:
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"

And after:
sizes="100vw"

Props joemcgill, transl8or.

Fixes #38847.

[helen]

In 39317:

Twenty Seventeen: Avoid an undefined index notice after [39291].

props westonruter.
see #38847.