Allow <source> elements to query container sizes

[andy-blum]

What problem are you trying to solve?

HTML's <source> elements are able to query viewport width with the media attribute to swap image sources based on device size. Now that container queries are part of Baseline 2023, <source> attributes should be able to swap image sources based on the size of a parent container as well

What solutions exist today?

DIY JavaScript solutions can alter the src attribute of <img> elements, but this still requires the rapid-fire callbacks of a resizeObserver to handle. JS-based solutions could be improved with a window.matchMedia analog for container queries as proposed here, but a native HTML solution would be ideal.

How would you solve it?

Similar to the existing media attribute, a new container attribute would be added and its value used to query the inline size of a container. This would query the width of the containing picture element to select the preferred source.

<picture>
  <source srcset="image-wide.png" container="(width > 800px)" />
  <source srcset="image-medium.png" container="(width > 600px)" />
  <img src="image-narrow.png" alt="alt text" />
</picture>

Alternatively, the container could also accept a <container-name> value that's been defined in CSS to instead query some container higher in the DOM.

<picture>
  <source srcset="image-wide.png" container="component (width > 800px)" />
  <source srcset="image-medium.png" container="component (width > 600px)" />
  <img src="image-narrow.png" alt="alt text" />
</picture>

Anything else?

No response

[myakura]

Wouldn't this make the image wait on the page for layout?

[andy-blum]

It would, but that's not a problem for lazy-loaded images or other images that are farther down the page.

[andy-blum]

Similar discussion happening here: w3c/csswg-drafts#5889

[eeeps]

I can see future in which

<picture>
  <source container="(width > 500px)" srcset="a">
  <img loading="lazy" src="b">
</picture>

works. But:

1. I think there are a lot of important, unanswered questions in the CSSWG thread about the performance impacts of this pattern. Anecdotally, I feel like art direction is especially used for above-the fold, hero/LCP images. And the only way out that I can see there - sizes on every ancestor container, worries me on a number of levels.
2. What should happen here?

<picture>
  <source container="(width > 500px)" srcset="a">
  <img src="b">
</picture>

My first take is, if source elements use container (or whatever) but the img does not have loading=lazy, the container query ("container condition"?) always evaluates to false.

[zcorpan]

Related: #8007