[docs]: add loading="lazy" to our images

[zeroedin]

As the title states, lets add lazy loading to our images.

The question of fold.... different devices/viewports have different vertical folds obviously....

Note: Experiments in Chrome on Android suggest that on 4G, 97.5% of lazy-loaded images were fully loaded within 10ms of becoming visible. Even on slow 2G networks, 92.6% of lazy-loaded images were fully loaded within 10ms. This means browser-level lazy loading offers a stable image visibility experience.
https://web.dev/articles/browser-level-image-lazy-loading#distance-from-viewport

Browsers that don't support the loading attribute ignore it. They don't get the benefits of lazy loading, but there's no negative impact from including it.

I would be curious about just adding this attribute to all images on the page regardless of position in the content (maybe not the masthead). Most images in our content column could potentially already be out of normal viewport on smaller mobile devices.

[adamjohnson]

I would make the default for <uxdot-example> loading="lazy" and then authors could override it to eager if necessary.

[zeroedin]

I would make the default for <uxdot-example> loading="lazy" and then authors could override it to eager if necessary.

The image is light dom. uxdot-example only wraps the image with styles. We'd still want the browser native lazy load.

If we wanted to go the route of uxdot-example doing that sort of thing, then we'd either lift and shifting the image into the shadowroot (not ideal IMHO) or creating an API to add images to the uxdot-example via attributes (also not ideal IMHO)

I think its best to just use the native browser implementation here and not make uxdot-example more complicated then it needs to be.