Loading attribute for images

Using the HTML loading attribute on an img asset creates no-JavaScript lazy-loading.
Tells the browser to either load the asset immediately or delay it.
A value of eager (default) tells the browser to start downloading the asset immediately.
A value of lazy tells the browser NOT to start downloading the asset immediately, but wait until the asset is nearly within the viewport.
Note this can also be used for img elements that are within picture elements.
Note this can also be used for iframe elements, but is not coonsistently implement, so it currently unreliable.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

HTML

<!-- Single source -->
<img src="https://placehold.co/600x400"
     width="600"
     height="400"
     alt="Placeholder image"
     loading="eager">

<br>

<!-- Multiple sources -->
<picture>
  <source srcset="https://placehold.co/400x200"
     width="400"
     height="200"
     media="(max-width: 400px)">
  <source srcset="https://placehold.co/1200x400"
     width="1200"
     height="400"
     media="(min-width: 401px)">
  <img
     src=""
     alt="Placeholder image"
     loading="eager">
</picture>

CSS

No special CSS required.

JS

No JS required.

Baseline

[`img`](https://webstatus.dev/features/img)

CodePen

See the Pen on CodePen.