Lazy-loading of background-images

[Malvoz]

Before opening https://github.com/w3c/csswg-drafts/issues/3659, I had assumed loading-image-default-eager applies to CSS background-images and generated content. But I don't think that's mentioned anywhere. @ehsan-karamad have you given any thought to this?

[ehsan-karamad]

I would have to pass that question to @bengreenstein since IMO this is more of a loading attribute question. The policy, when disabled, should (almost always) treat unset or auto attribute values as lazy. It is almost always to open room for some user agent optimizations for certain images (e.g., small images). I am not quite sure how the loading attribute deals with background images. cc @clelland.

[clelland]

I don't think that the loading attribute applies to CSS at all; as specced, it's only defined on img (and iframe) elements, and only affects their replaced content, not the background. If that spec were to change, (maybe by defining a parallel background-loading CSS property) then I think loading-image-default-eager should cover that as well, but that would have to be defined first.

[jsnkuhn]

Questions about lazy-loading of CSS background-images come up pretty regularly on some of the CSS question discords. Some random thoughts:

1. Seems like the idea should be more generic, as in lazy loading of css images in general to cover background-image, border-image,mask-image, generated content images, etc.

2. Not sure if something like image-loading: lazy; per element is what folks want or if something more granular like background-loading: lazy; or background-image-loading: lazy; is what folks are wanting. The the latter seems like it would need be able to individually control multiple background-images. As in don't lazy load a fallback gradient image but do lazy load a PNG background that lays on top of the gradient background.