Allow `<source>` elements to query container sizes about html HOT 5 OPEN

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

from html.

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

from html.

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

from html.

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.

from html.

Related: #8007

from html.