Allow <source> elements to query container sizes #10182

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