HTML/CSSIntermediate#html#performance

How do you lazy-load images natively in HTML?

The loading='lazy' attribute on <img> defers loading offscreen images until the user scrolls near them, improving initial page load performance without any JavaScript library.

Example
<img src="large-photo.jpg" loading="lazy" alt="Product photo">

Related Questions

1
HTML/CSSAdvanced#css#layout

What is the difference between a block formatting context (BFC) and normal flow?

Open
2
HTML/CSSIntermediate#css#accessibility

What is the difference between resetting focus outlines and providing accessible focus styles?

Open
3
HTML/CSSAdvanced#css#grid

What is the difference between CSS Grid's implicit and explicit grid?

Open