Contrib.social

Responsive image in Drupal core incorrectly selects the last image style sometimes resulting in wrong rendered image

Open on Drupal.org →
Created on 8 May 2025, 10 days ago

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

  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 relatively large fallback image (read this issue for details on fallback image problem)
  10. Save your changes

    11. (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

Proposed resolution

TBD

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.1 🔥

Component

responsive_image.module

Created by

🇺🇸United States mariohernandez Los Angeles

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024