A hint for lazy loading images

[Zirro]

Lazy loading images are increasingly common across websites. The methods currently used to achieve it rely on scripting and offer little control for the user and user agent to decide whether lazy loading is appropriate. In contexts where scripting is disabled or scrolling is not involved (such as when printing, see issue #2532) the user may not see any image.

I would like to suggest a way for websites to hint to a user agent that an image should be lazy loaded. This will allow the user agent to decide the appropriate behaviour for the context.

As a basic proposal, I'm imagining that this hint would be an attribute on the <img> element. It could have two values:

• A value which tells the browser to use its own logic to determine when it is appropriate to load the image, such as when it enters the viewport. This would have the effect of replacing the current src attribute, allowing for the common pattern where a low quality image is replaced with a higher quality one.
• A value which tells the browser not to load the image right away, but that the website would prefer to use its own script to initialise the lazy loading. If scripting is disabled, the browser would fall back to the behaviour used for the previous value.

I believe that such a hint would help give control of the behaviour to the user, make it easier for web developers with knowledge of only HTML/CSS to implement lazy loading images, avoid potentially expensive scroll listeners and allow users to see images even where scripting is not available.

[Yay295]

I don't think the second value is necessary. If you want to handle the loading yourself, I would think you could just remove the lazy-loading attribute from the images, which would stop/prevent the browser from doing it.

[Zirro]

With the second value, the premature loading of images would still be prevented by default. Otherwise websites would have to insert the img element using a script, meaning user agents without scripting won't have an image to show.

[domenic]

This is a dupe of https://www.w3.org/Bugs/Public/show_bug.cgi?id=17842. Normally I'd move Bugzilla bugs to GitHub (i.e. close that with status moved and redirect people to this thread). However, there is so much important context in that Bugzilla thread, I think people need to really go and read and digest all the history there, so I would prefer that it stay the primary source of discussion on this topic.

[domenic]

Note that this later got forward-duped to #2806.