CoverT 8: Native Image Lazy Loading

codeInteractive Code Example

Most modern browsers are now supporting native image lazy loading via HTML via the loading="lazy" attribute.

This will enable browsers to not have to fetch every image for the entire page at first load, but rather just fetch images as they need to display them (e.g. scroll near to the image). For more details you can check out the web.dev site. This same technique can be used for videos (and likely more stuff in the future).

Code

<img loading='lazy' src='https://placekitten.com/400/400' width='400' height='400' />
<img loading='lazy' src='https://placekitten.com/401/401' width='401' height='401' />
<img loading='lazy' src='https://placekitten.com/402/402' width='402' height='402' />
...

Example in action

native lazy loading example