Reponsive images should use sizes attribute

Created on 13 January 2025, about 2 months ago

Problem/Motivation

Spin-off from 📌 Reduce the number of display modes available on embedded images Active .

Drupal CMS' content model allows for using images of the same aspect ratio (say 4:3) in two or more different container sizes (e.g. full width vs. half width). Currently this is being achieved via using multiple media display modes with different responsive image sizes. Note I'm assuming the aspect ratio doesn't change here, that should also be possible just even more complicated.

I think (although I have not manually tested it or used the feature for a while) that Drupal's responsive image support should be able to handle this with a single view mode + responsive image style for each aspect ratio.

Responsive image settings allow styles to be configured for specific breakpoints, and then within a breakpoint, there is the option to use 'multiple images with the sizes attribute'. The sizes attribute allows for container-relative notation (em, px etc.) which allows for a particular image style to be selected based on container width. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes

This means that you can e.g. have (pseudo-code):

breakpoint: min-width 1200px

sizes:
300x
600px
900px

breakpoint: min-width 800px:

sizes:
200px
400px
600px

It would also be possible to ignore the breakpoints, and do e.g.:

breakpoint: min-width 400px

sizes
200px
400px
600px
800px

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task

Status

Active

Component

Track: Media Management

Created by

🇬🇧United Kingdom catch

Live updates comments and jobs are added and updated live.

Performance
It affects performance. It is often combined with the Needs profiling tag.

Comments & Activities

Issue created by @catch
Comment about 2 months ago →
🇬🇧United Kingdom catch
Comment about 2 months ago →
🇬🇧United Kingdom tonypaulbarker Leeds
@catch

Given the viewport width and the container width are identical in both cases, the selection in the dropdown allows an editor to choose an image that will render as either up to 300px in width (small) or up to 720px in width (medium).

The bit that I don't think we can hand over to responsive images to handle at the moment is that user input.
Comment about 2 months ago →
🇬🇧United Kingdom catch
@tonypaulbarker yes I think that bit would need to come from #3497545-9: Reduce the number of display modes available on embedded images → or something like it, but it looks like the responsive image configuration would need to be updated to support that.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024