Size and prioritize images

Set image dimensions, lazy-load below the fold, prioritize the hero.

Reserve the space

Simulate a slow load and watch the paragraph.

Latency 1.2 s width height

No dimensionsBad

Field notes · 4 min

The last light catches the upper slope first, then the valley goes blue. Start reading here and keep your eye on this line.

<img src="dusk.jpg" alt="">0.000

width + height setGood

Field notes · 4 min

The last light catches the upper slope first, then the valley goes blue. Start reading here and keep your eye on this line.

<img width="1200" height="675">0.000

<img src="/dusk.jpg" width="1200" height="675" alt="Ridge line at dusk">
img { max-width: 100%; height: auto; }

Scroll the feeds and compare the request counts.

Network Load ahead 200 px Scroll together

EagerBad

Requested 0 of 30

<img width="640" height="360">

loading="lazy"Good

Requested 0 of 30

<img width="640" height="360" loading="lazy">

<img src="/feed/07.jpg" width="640" height="360"
     loading="lazy" decoding="async" alt="…">

Load the page and watch when the hero lands.

Competing 6 Network

fetchpriority autoBad

<img src="hero.jpg">–

fetchpriority highGood

<img src="hero.jpg" fetchpriority="high">–

<img src="/hero.jpg" width="1600" height="900"
     fetchpriority="high" alt="…">

Without dimensions the browser reserves nothing, so each image shoves the text.