Help the HTML standard with the approach for when to load lazy images

[zcorpan]

Intelligent prefetch/Intelligent resource prioritization: lazysizes prefetches/preloads near the view assets to improve user experience, but only while the browser network is idling (see also expand, expFactor and loadMode options). This way in view elements are loaded faster and near of view images are preloaded lazily before they come into view.

https://github.com/aFarkas/lazysizes#what-makes-lazysizes-so-awesome

Lazy-loading images was recently added as a native feature to HTML, and browsers are currently trying to figure out when lazy images should start loading.

Would the maintainers of this project be willing to chime in here: whatwg/html#5408 and explain the approach taken here in more detail, and the rationale? I think this can help inform what browsers should do for loading=lazy images.

Thanks! ❤️

[strarsis]

@zcorpan: But there is native standard yet to contain/cover the image into parent element on client-side? This is the main use-case for lazysizes in my projects.

[zcorpan]

Like the CSS object-fit property?

[strarsis]

@zcorpan: Yes! With dynamic content the element height cannot be known in advance (well with some complicated server-side browser rendering maybe, but this will still not take the text breaking hyphens, etc into account). Therefore sizes cannot be used for cover fit because this requires the height.

[zcorpan]

Is it something the "auto sizes" feature in lazysizes enables? I don't really follow, a demo might help.

[strarsis]

@zcorpan: Sure: https://codepen.io/strarsis/pen/gOaMgRN

[aFarkas]

@zcorpan
Yes we already talked about this in the standard autosize feature. This is why we need the h descriptor. (The demo of @strarsis uses a data-aspectratio attribute instead of the standard decscriptor.).

@strarsis
The data-aspectratio has to be defined on the source element not the img.

[zcorpan]

OK, then I think the following issues cover the needs of @strarsis demo:

whatwg/html#4654
whatwg/html#4968

The h descriptor could provide intrinsic aspect ratio too (instead of width/height on source)

whatwg/html#2973

[aFarkas]

@zcorpan
Do you also plan to implement some kind of optimumx or maxdpr attribute to constrain the resolution of an image?

[zcorpan]

@aFarkas no such plan currently AFAIK. Browsers can choose to cap their "x" to avoid downloading unnecessarily large images though when choosing from srcset.