Lazy loading images

[michal_novomesky]

Hello.
Is there a possibility to add a
a/ checkbox somewhere to HTML Export Options to add the loading="lazy" attribute for larger images inside topic contents
b/ possibility to set the "loading" attribute for each image in the Open Image editor?
https://www.w3schools.com/tags/att_img_loading.asp

Not sure how others use images in user guides, but for illustrated instructions on longer topics, it can save some network traffic.

[Tim Green]

Hi Michal,

This isn't currently supported, but we will look into it. However, I wouldn't really reommend using it, because the results will often be negative. This is because of the requirement that this should only be applied to images that are "below the fold". It's very difficult to know in advance which images those are going to be, because of varying device and screen sizes and resolutions. Mozilla explains this succinctly as follows in their recommendations on handling things like this:

The [lazy] load event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded..

[Alexander Halser]

Hello Michal,
We don't explicitly support this and we believe, it is not really necessary. For fixed-sized images, H&M exports an explicit width and height CSS attribute. This information is interpreted by most browsers in a way, that this particular image is due for lazy loading. Because the fixed size lets the browser calculate the layout beforehand and insert the image, when available. We don't know exactly what a browser does, but if I were to program the layout engine, I would keep a list of images who's sizes are known and put them on a lazy-loading list.