Support lazy-loading CSS background-images

[addyosmani]

While browsers increasing support the loading attribute for lazy-loading images, this does not apply to CSS background-images. As a result, developers often need to build a custom solution to address this problem that relies on Intersection Observer and JS. We also need a solution to this problem for content management platforms (e.g. WordPress) where lazy-loading is now baked in by default.

I ran into this problem again today and wanted to restart discussions on whether this is a worthwhile problem to solve. I don't have strong opinions on the exact shape of how we may wish to enable loading configuration for background-image URLs, but can throw out a few suggestions. I'm sure others will have wiser ideas :)

.box-1 {
  background-image:
    linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
    url('catfront.png');
  /* Setting loading behavior via background-image-loading */
  background-image-loading: "lazy";
}

.box-2 {
  /* Setting loading behavior via loading() */
  background-image: url("large-balloons.jpg") loading("lazy");
  background-image: image-set(
    url("large-balloons.avif") type("image/avif"),
    url("large-balloons.jpg") type("image/jpeg"));
}

Please feel free to close if we already have an issue for discussing lazy-loading background images elsewhere. I was unable to locate one.

cc @zcorpan @yoavweiss @chrishtr

References:

• https://web.dev/browser-level-image-lazy-loading/#can-css-background-images-take-advantage-of-the-loading-attribute
• https://web.dev/lazy-loading-images/#images-css
• https://imagekit.io/blog/lazy-loading-images-complete-guide/#lazy-loading-css-background-images

[tomayac]

Maybe this could be realized as a URL modifier of the url() function?

[j9t]

@addyosmani, you will have a reason for filing this with the WHATWG (instead of with the CSS working group), but can you share more with those who can’t make the connection? Is it just to seek additional input, or to prepare a proposal for CSS that aligns with what we have in HTML?

---

Then, for both the HTML and a CSS solution, I wonder why our HTML solution and a prospective CSS-solution is so tightly coupled with “loading.” It’s just a loose thought, but what this seems to indicate is some sort of priority. The exciting thing about something like a priority is that it could offer more options for handling priority (and non-priority) resources other than loading sooner or later.

Examples:

• <img src=foo priority> → UA to load asap; as it’s not tied to loading, a UA could also indicate importance on hover (light glow, whatever)
• img { background: bar; priority: low } → UA to defer loading; as it’s not tied to loading alone, a UA could also suspend or delay animations on the respective element (or whatever)

I didn’t follow the discussions around loading to tell whether something like this was considered or we missed an opportunity in HTML, so as to inform decisions for CSS.

[yoavweiss]

@j9t - you may want to take a look at https://github.com/WICG/priority-hints which is exploring the very idea of priorities for content images, among other resource types. Lazy loading is slightly different than priority though.

I think it makes sense to enable lazy loading of BG images. At the same time, I'm not sure if we need per-image controls for that, or a general "just load all BG images out of the initial viewport as lazy" document policy. The latter seems like something that'd be easier to automatically apply, and unlike content images, won't have undesired effects of delaying the in-viewport BG image loads (as they are already delayed until layout).

[Malvoz]

See also https://github.com/w3c/csswg-drafts/issues/3659 and https://github.com/WICG/document-policy/issues/20.

[ctomczyk]

Is this feature still being discussed?

If so, I'd like to add my 5 cents with further features to consider:

1. Ability to specify lazy loading depending on the media query. Sometimes the background image should be loaded immediately on a large viewport, and sometimes it should be lazy loaded on the small viewport.

2. It would be good to specify a delay for init lazy loading. This is useful when the user scrolls content quickly and images that aren't visible in the viewport for a certain time shouldn't be loaded. I wrote an article Improved lazy loading for images, videos, and audio that is related to that as well.

Thoughts on that are very welcome.