Images Are Most of Your Page, and Most of Your Wait

When a site feels slow, the first instinct is the server. It is rarely the server. On a site built around photography, the bytes are overwhelmingly images, and the wait a visitor feels is the time between the layout appearing and the pictures filling it in.

Most stacks can resize an image on demand and cache the result. That is fine until the first visitor after a deploy, who pays for the resize, and worse on a small server where several at once queue behind each other.

Generating every size at build time removes the problem rather than caching it. Each request becomes a static file read. There is no first-visitor penalty and no difference between a cold page and a warm one.

A card 400 pixels wide does not need a 2000 pixel file, but it will happily accept one. Describing the slot honestly — the real rendered width at each breakpoint — is often a bigger saving than changing format.

• Measure the rendered width at each breakpoint, do not estimate it
• Remember high-density screens ask for roughly twice what you measured
• Cap the largest size at the widest the design ever draws

A placeholder that holds for several seconds is not a loading style; it is a slow image wearing a nicer costume. It is worth keeping, but only once the thing it covers is quick.

Measure a cold load from a device that has never seen the site. Your own browser has a warm cache and will lie to you.

The order that works: send fewer bytes, send them pre-sized, serve them from somewhere near the reader. The placeholder comes last.