Reduce maximum image size used as background image based on container width

Feature Description

Consider a Group block that has a background image applied (or a Cover block with a fixed/parallax background): the background image is applied via background-image. This means that there is no srcset to pick the appropriate image, and the full image size is getting used. (The Cover block allows for the resolution to be overridden via the settings panel, but the default is full. The Group block does not provide any resolution setting as far as I can see.)

A Group block with a background image may look like this:

<!-- wp:group {"style":{"background":{"backgroundImage":{"url":"http://localhost:8000/wp-content/uploads/2025/10/American_bison_k5680-1-scaled.jpg","id":536,"source":"file","title":"American_bison_k5680-1"},"backgroundSize":"contain","backgroundRepeat":"no-repeat"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"var:preset|spacing|60","right":"var:preset|spacing|60"}},"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"accent-6","textColor":"base","fontSize":"xx-large","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-base-color has-accent-6-background-color has-text-color has-background has-link-color has-xx-large-font-size" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"align":"center","backgroundColor":"accent-6"} -->
<p class="has-text-align-center has-accent-6-background-color has-background"><strong><em>BISON!!!</em></strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Even on Desktop, the image is way too big. The container has a 645px width, and yet the full size being used as the background-image is 2560px wide:

This represents a lot of wasted bytes.

There are two opportunities for us to rectify this in Performance Lab:

1. The Enhanced Responsive Images (auto-sizes) plugin has awareness of the dimensions of blocks on block themes, and it could reduce the size appropriately.
2. With Image Prioritizer (via Optimization Detective), we can know the dimensions of a given element that has the CSS background image added to it (once URL Metrics for Desktop have ben collected). This, in fact, has already been done for the poster of a VIDEO (ref)

We can obtain the various sizes for the background-image and select a smaller one than full for that spot. For example, this is the approprize size:

This example represents a 62% reduction in the file size for the image used as a background image, and this would have big impacts on improving LCP.

Ideally the changes would start here but then migrate into Gutenberg for core merge soon after, especially in the case of the Enhanced Responsive Images patch.

See also:

• https://github.com/WordPress/gutenberg/issues/59113

Start by reading the Enhanced Responsive Images (auto-sizes) and Image Prioritizer paths in Performance Lab, especially plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php and its handling of video posters. Trace how background-image dimensions and available image sizes could be connected, then check Gutenberg issue 59113. Done means background images can use a smaller appropriate size than full, with the intended Performance Lab-to-Gutenberg migration path identified.