[Proposal] Always load KImg lazily

[MisRob]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Proposed behavior

In KImg, always set <img>'s loading attribute to lazy (MDN).

Making this option configurable doesn't seem necessary to me - as far as I can say from our use-cases and MDN docs this is what we'd want to do by default.

Based on @rtibbles suggestion (Slack thread).

Needs decisions

However, there are some issues with this approach that, unless addressed, could cause (1) images not being rendered in unexpected and hard-to-debug ways, (2) decreased performance:

Note: Images with loading set to lazy will never be loaded if they do not intersect a visible part of an element, even if loading them would change that as unloaded images have a width and height of 0. Putting width and height on lazy-loaded images fixes this issue and is a best practice, recommended by the specification. Doing so also helps prevent layout shifts. (Source: MDN)

Generally, we can estimate height and width. So I think we'd just need to figure out how to pass these values to KImg and components that use KImg under the hood, such as KCard. Since this is something that only KDS consumers knows, it would likely need to be done via some new public APIs.

Taking into account that KCard uses KImg to render thumbnails that are typically important visual feature of our cards, to me this feels important to consider.