Problem/Motivation

Bootstrap Layout Builder already knows the responsive width of each Layout Builder
region, but this information is not available to Drupal core Responsive Image when
an image is rendered inside that region.

This can cause the sizes attribute to significantly overestimate the
actual rendered width of an image, causing browsers to select unnecessarily large
image derivatives from the srcset.

This is particularly relevant for reusable image/media blocks placed in different
Bootstrap Layout Builder column configurations. The same image block may be placed
in a 4/12, 5/12, 7/12, 8/12 or full-width region, while Responsive Image uses a
static sizes configuration that has no knowledge of the containing
Layout Builder region.

BLB already has the required layout information. For example, a two-column section
configured as 5/7 stores: 

breakpoints:
  desktop: blb_col_5_7
  tablet: blb_col_5_7
  mobile: blb_col_12

layout_regions_classes:
  blb_region_col_1:
    - col-lg-5
    - col-md-5
    - col-12
  blb_region_col_2:
    - col-lg-7
    - col-md-7
    - col-12

Drupal core's LayoutDefault::build() also exposes the layout
configuration in the render array: 

$build['#settings'] = $this->getConfiguration();

Bootstrap Layout Builder then adds the calculated
layout_regions_classes to the corresponding region.
The layout information therefore exists in the render tree, but there does not
appear to be an established way for Responsive Image rendering deeper in that
region to use it when determining sizes.

Steps to reproduce

  1. Install Drupal 11.4.7, Bootstrap Layout Builder 2.2.1 and enable Drupal core Responsive Image.
  2. Create a responsive image style using width-descriptor srcset candidates.
  3. Create a reusable block containing a Media image rendered using that responsive image style.
  4. Create a two-column Bootstrap Layout Builder section.
  5. Configure the section as 5/7 on desktop and tablet and 12/12 on mobile.
  6. Place the image block in the 7/12 region.
  7. Configure the responsive image mapping with sizes="100vw" (or another static value suitable for full-width content).
  8. Inspect the generated <picture> markup.

The Layout Builder region is correctly rendered as: 

<div class="col-lg-7 col-md-7 col-12">
  ...
  <picture>...</picture>
</div>

However, Responsive Image can still output for example: 

<source
  media="all and (min-width: 992px)"
  sizes="100vw"
  srcset="... 600w, ... 900w, ... 1200w, ... 1453w">

The image does not occupy 100vw at this breakpoint. It occupies 7/12 of the
Bootstrap Layout Builder region. The browser may therefore select a larger image
candidate than required.

Changing the Responsive Image style or Media view mode for each possible column
width is not a scalable solution. Ideally an editor should only need to choose a
Layout Builder layout, place an image block in a region, and select the image.
Moving that block to another region should automatically result in appropriate
responsive image sizing.

Proposed resolution

This issue is intended partly as an architectural discussion before proposing a
specific implementation.

Provide a generic mechanism for responsive images rendered inside a Bootstrap
Layout Builder region to use the responsive width of their containing region when
determining the sizes attribute.

For example, an image inside a region configured as: 

col-lg-7
col-md-7
col-12

should be able to derive an appropriate sizes value automatically.
If the same block is moved to a 4/12 region, the image sizing should adapt without
requiring the editor to select another Media view mode or Responsive Image style.

Maintainer feedback would be appreciated regarding where this integration should
live:

  • Bootstrap Layout Builder, because it owns the responsive grid/region information;
  • Drupal core Layout Builder, by exposing container/region sizing context to child render elements;
  • Drupal core Responsive Image; or
  • a separate integration module.

Remaining tasks

  • Determine the appropriate architectural layer for passing layout width context to responsive images.
  • Agree on how Bootstrap container types, gutters and breakpoints should be represented in sizes.
  • Implement the agreed approach.
  • Add automated test coverage.
  • Add documentation if configuration or APIs are introduced.

User interface changes

Ideally none.

The goal is specifically to avoid requiring content editors to choose technical
Media view modes or Responsive Image profiles based on the Layout Builder column
in which an image is placed.

API changes

To be determined. A solution may require a mechanism for exposing Layout Builder
region/container sizing information to child render elements.

Data model changes

None expected.

Comments

per created an issue.