Twenty Seventeen: Custom header image blurry on small screens

[philnick206]

Quick summary

When viewing a site with a custom header image on Twenty Seventeen, the image is noticeably blurry.

Steps to reproduce

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

What you expected to happen

The header image should still look crisp

What actually happened

The header image switches to looking much more blurry

This appears to be related to the srcset property on the image file on the page:

Context

Reported in #4895116-zen

Simple, Atomic or both?

Simple

Theme-specific issue?

Twenty Seventeen

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No response

Workaround details

No response

[Robertght]

I'm not able to replicate this just yet @philnick206.

What size was the image? I can see it was a cropped version, but not sure what was the actual size.

[philnick206]

Hi @Robertght I was using an image that was 2000 ✕ 1200. But it is reproducible by skipping the crop as well. Here is a link to the image I used in the example: https://philnicktestahome.files.wordpress.com/2019/09/cropped-pexels-photo-2745258.jpeg

[Robertght]

Thank you for sharing @philnick206 ! This appears to be a core thing and I've reported it here: https://core.trac.wordpress.org/ticket/55561#ticket

[DavidSaladu]

Also seen in 23389345-hc

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4895116-zen