Add <img loading=after-layout> to support auto-sizes

[zcorpan]

In #4654 it's proposed to add a way to get the sizes value from layout, which would make sense for lazy-loaded images. But it can also be useful for images that load as soon as possible, but after layout. Something in-between eager and lazy. See #4654 (comment) (@jakearchibald)

I like the idea of sizes="auto", but the introduction of container queries may make it desirable for images other than loading=lazy. If your element is styled using a container query, it seems difficult to express that in sizes.

I'm not aware of use cases for delaying the load of the image except for auto-sizes. So to avoid making images slower because developers cargo-cult add loading=after-layout for no particular reason, we can make it invalid to specify unless the image uses auto-sizes, and if specified anyway, be equivalent to eager.

A new loading value could make sense, indeed. Then omitting sizes or using explicit auto is only allowed for loading=lazy or loading=after-layout (modulo bikeshed).

Originally posted by @zcorpan in #4654 (comment)

[yoavweiss]

Thinking about this a bit:

• The only difference between loading=lazy and loading=after-layout for images that are inside or near the initial viewport is that we can ignore loading=after-layout if auto-sizes is not explicitly requested.
• At the same time, I'm not sure that we need an explicit request for auto-sizes, rather than just applying auto-sizes automatically when loading=lazy is involved.
• For images far outside the viewport, the benefit of loading=after-layout would be to reduce the chances of the user scrolling to that image to find it's not there. It may be interesting to gather data on how often that happens today.
• You mention your concern with developers spraying loading=after-layout as magical performance dust on their images, which is a valid one. To some extent, that already happened with loading=lazy :/ At the same time, applying auto-sizes to loading=lazy can help mitigate some of the adverse effects of that.

[jakearchibald]

cc @una: do you have use-cases where:

• An image's layout size is pretty detached from the window width (container queries, but there may be others)
• It's possible the image won't be in the initial viewport, but loading=lazy would be undesirable

[zcorpan]

@yoavweiss for the second bullet point, yes, omitting the sizes attribute would give auto-sizes except when loading is in the Eager state.