Problem/Motivation
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 incorrectly selects the last image style in the list as the image size to render completely ignoring the configuration preferences defined in the specific responsive image style configuration screen.
Steps to reproduce
- Enable the Responsive image module (required)
- Enable the Media and Media library modules (optional)
- Navigate to your site's responsive images configuration page (
/admin/config/media/responsive-image-style
) - Edit the responsive image style you wish to work with (I'm using core's Wide in my example)
- Select Responsive image from the Breakpoint group select field
- Expand the 1x Viewport Sizing [] fieldset and select Select multiple image styles and use the sizes attribute. as the type
- 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. - Select as many image styles as you wish (pay attention to the order of the image styles)
- Pick a relatively large fallback image (read this issue for details on fallback image problem)
- Save your changes
- 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)
- Create a new node using the entity type that has the image field in the previous item
- Inspect the rendered image to see which image was rendered if it's not obvious by simply looking at the rendered image
(See screenshot below for configuration example)
Proposed resolution
TBD