Description

I was unsure whether to list this as a bug or feature request. Feel free to recategorize.

When a Cover block background image is lazy loaded and has srcset and auto sizes enabled, browsers appear to use the rendered size of that image to determine image selection when that image is lazy loaded. This can conflict with object-fit: cover, which may require an image much wider than the rendered width to satisfy the requested height of the container.

Being able to selectively turn off auto sizes for only Cover block images would help resolve this issue (best I can tell, auto sizes can only be turned off globally). I suppose a complicated rework of the Cover block that uses position: absolute and top/left attributes instead of object-fit: cover and object-position could work, but feels pretty bad.

Interestingly, this problem also appears on mobile with standard srcset as well - if the height of the container demands a 1000px wide image but the viewport is only 400px wide, you are going to get too small of an image. Ultimately, object-fit: cover does not play well with srcset based on how browsers currently implement the standard.

Step-by-step reproduction instructions

1. Create a fresh WP installation.
2. Add a page with several images and some content so that the Cover block will be set to lazy load.
3. Add a Cover block that is pretty narrow. Adding a Columns Block that makes the Cover block really narrow makes this easy.
4. Add a wide, short image to the Cover block. I added the image I used below if you want to use it.
5. Set the Cover block to a minimum height; 600px is good if you want to use the image below.
6. Load the frontend and observe the image is very pixelated.

Screenshots, screen recording, code snippet

This is how it renders for me using the instructions above:

Because the Cover block is set to min-height: 600px, ideally the full image would be loaded to maintain its native resolution (2400x600). Instead, because it is rendered at only ~300px wide, the 768x192 version is displayed.

Environment info

• WP 6.9
• Chrome
• Windows
• Twenty Twenty-Five
• no plugins

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure