Responsive images fail to scale because dimensions are locked to the last image style

Problem/Motivation

This issue was originally identified in Drupal 10.4+ but it still exists in the latest Drupal 11+ versions. When configuring responsive image styles using the image tag's srcset and sizes attributes, Drupal sorts the selected image styles alphabetically (by machine name), and selects the last image style in the list as the image size to render. This does not always results in the right image size being rendered.

Steps to reproduce

1. Enable the Responsive image module (required)
2. Enable the Media and Media library modules (optional)
3. Navigate to your site's responsive images configuration page (/admin/config/media/responsive-image-style)
4. Edit the responsive image style you wish to work with (I'm using core's Wide in my example)
5. Select Responsive image from the Breakpoint group select field
6. Expand the 1x Viewport Sizing [] fieldset and select Select multiple image styles and use the sizes attribute. as the type
7. To keep it simple, type 100vw in the Sizes field. This means the image should be full width (100% viewport width) for all device sizes.
8. Select as many image styles as you wish (pay attention to the order of the image styles)
9. Pick a fallback image (For this test to work you need to apply the patch in #3516726: Image width/height from fallback image breaks responsive images otherwise you will experience the bug in that issue and this will skew this test.)
10. Save your changes

(See screenshot below for configuration example)

11. Modify the entity type that has an image field you wish to test with and ensure the image uses the responsive image styles you just configured (in my case this is the Wide responsive image style)
12. Create a new node using the entity type that has the image field in the previous item
13. Inspect the rendered image to see which image was rendered if it's not obvious by simply looking at the rendered image

FIG. 1

This configuration results in a 2600px image being loaded but Drupal resizes it to 650px based on the last image style shown in FIG. 1 above.

FIG. 2

Proposed resolution

The expected behavior of responsive images when using the srcset and sizes attributes (Resolution switching), is for the browser to identify the image sources provided in the srcset attributes, understand the size the image is expected to be rendered at, and finally select the most appropriate image to rendered based on the user's environment (viewport width, screen resolution, network speed, etc.)
The approach Drupal is taking as described above is to override the dimensions of the image the browser has selected by using the dimensions of the last image style in your responsive image styles configuration as shown in FIG. 1. This means Drupal is rendering the right image, but its width and height are altered to those of the last image style in the list. Depending on the order of the image styles, sometimes this may not be an issue but in cases when the last image style's dimensions don't match the desired dimensions of the rendered image, this presents a problem.

FIG. 3

The screenshot in FIG 3 shows the image rendering properly after removing the 650px image style from the responsive_image configuration shown in FIG 1.

Remaining tasks

Determine cause of the issue.

User interface changes

TBD

Introduced terminology

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A