Images that do not shift the page in HTML

Width and height are not styling: they reserve the space before the file arrives.

<img src="/img/hero.jpg" alt="A split keyboard on a wooden desk"
     width="1200" height="630" fetchpriority="high">

<img src="/img/thumb.jpg" alt="" width="240" height="160"
     loading="lazy" decoding="async">

How it works

1. width and height let the browser hold the right box from the start.
2. loading="lazy" defers offscreen images; never above the fold.
3. decoding="async" keeps decoding off the main thread.

The run, in numbers

Lines

5

Characters to type

204

Tokens

39

Three-star pace

65 tpm

At the three-star pace of 65 tokens a minute, this run takes about 36 seconds.

Type this snippet

Step 6 of 7 in Links & images, step 21 of 28 in Document structure.

← Previous Next →