Better image loading: decoding="async" height="x" loading="lazy"

[yuxi-liu-wired]

Description

Currently, in the HTML generated, <img> tags are simple like

<img src="./img.png" class="thumbnail-image">

However, I think it would be better to allow async lazy loading like

<img src="./img.png" class="thumbnail-image" decoding="async" height="649" loading="lazy">

This accomplishes several things: The decoding="async" allows text to load without blocking. The loading="lazy" allows images to only load when the user scrolls there. The height="649" means there is no Cumulative Layout Shift (CLS) as the page loads.

[cscheid]

Good ideas!

decoding="async"

This appears to be different from browser to browser. As such, I would prefer to defer to the user's implicit choice here.

loading="lazy"

By itself, I think this is risky. Not loading the image ahead of scrolling might interact badly with our scroll computations (which we use to hide/show sidebars as needed). It might be a safe thing to do if we also enable the height calculation, on which more below.

height="649"

Two issues here. First, we can't always determine this image size, and to do it portably would require help from Pandoc. (by eg. enhancing the mediabag API) Second, I'd like to be sure that a setting like this cannot interfere with our current CSS; it seems safer than loading="lazy", but we would have to test.