knowledge/Lazy loading images in HTML.md

tags

tags
knowledge, frontend

Lazy loading images in HTML

To implement Lazy Loading to an <img ... > tag, add the attribute loading=lazy

<img loading=lazy ... >

This will load the image when scrolling is near the viewport, using the Intersection Observer API

Further reading

• Native image lazy-loading

What led to learning this

Accidentally: a rabbit hole that started at Jason Crawford's github and ended at an issue in the owid-grapher repo