Twenty Seventeen: Blurry header image on mobile

[robertghetau]

Steps to reproduce

• Add a custom header image via the Customizer on Twenty Seventeen
• View the site on desktop
• View the site on mobile/use responsive design mode to see image on a smaller screen

Image used: ​https://philnicktestahome.files.wordpress.com/2019/09/cropped-pexels-photo-2745258.jpeg

This appears to be caused by the Responsive images settings inside the theme.

[sabernhardt]

Original report:
​https://github.com/Automattic/themes/issues/5844

The image might be a little stretched, but it seems to get blurry below the 48em breakpoint (possibly related to the 768w and smaller images in the srcset.)

[sabernhardt]

The srcset fetches smaller images based on the viewport width, but the styles allow it to stretch beyond the container width (up to 1000%).

[sabernhardt]

increases size recommendation to 200vw for screens up to 767px wide

[sabernhardt]

I chose 200vw for the smaller screens so it would be less than the full size. Increasing further to 2000px might avoid blurriness at any height, though the image probably would be larger than necessary.

The image fills a container that is 75vh tall, which would make the image width 125vh at a ratio of 5:3 (but vh does not seem to work in the sizes attribute).

[shailu25]

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/55561/55561.diff

Environment:

WordPress - 6.5.2
OS - Windows
Browser - Chrome
Theme: Twenty Seventeen
PHP - 8.1.23
Active Plugin - None

Actual Results:

• Issue Resolved With Patch ✅

Screenshots:

Before Patch: ​https://prnt.sc/9Tyhwfv-38_P
After Patch: ​https://prnt.sc/cEt-_Vn1ec0Z

[sabernhardt]

I missed that this issue had a much older ticket: #39253

Please continue the discussion there.