Images

Covers perf.lazy-and-priority, perf.image-formats.

Images are almost always the largest thing a page downloads, and on these sites a full-bleed hero is almost always the LCP element. Getting this section right moves LCP more than anything else in the document.

The priority rule, which is easy to get backwards

<!-- The LCP image: eager, high priority, no async decoding -->
<img src="hero.webp" alt="..." width="1600" height="900" fetchpriority="high">

<!-- Everything below the fold -->
<img src="card.webp" alt="..." width="800" height="600" loading="lazy" decoding="async">

Never put loading="lazy" on the LCP image. It delays the exact request that decides the metric, and it is a common regression when someone adds lazy loading in bulk with a find and replace. fetchpriority="high" on that one image is usually worth several hundred milliseconds on its own.

Only one image gets fetchpriority="high". Marking five as high priority is the same as marking none.

Dimensions are not optional

width and height on every image, always, even when CSS overrides them. They give the browser the aspect ratio so it can reserve the space, which is what keeps CLS at zero. An image without them occupies nothing until it arrives and then shoves the page down.

Format and size

Serve WebP or AVIF with a fallback. A PNG hero is the most common single cause of a slow mobile LCP on these projects, and PNG is the wrong format for a photograph in any case.

Generate responsive sizes and let the browser choose:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2000.webp 2000w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="..." width="1200" height="675" fetchpriority="high">

Without srcset, a phone downloads the desktop image. On a 2000px hero that is several times the bytes it needed, on the connection least able to afford them.

The threshold to check against: no image should transfer more than about twice the bytes needed at the size it actually displays, accounting for a 2x display.

SVG

Inline small icons, or use a sprite. Do not load an SVG per icon over the network. Run them through an optimiser - exported SVGs routinely carry editor metadata larger than the artwork. Do not print raw SVG source into a template review; reference the file.

Backgrounds

A CSS background image is invisible to the preload scanner, so it starts downloading later than an img would. If the LCP element is a CSS background, either make it an img or preload it. This is worth checking specifically, because full-bleed section backgrounds are a common pattern here and they measure worse than they look.

The content problem

Everything above is a build-time concern that a client's media library will undo. Someone uploads a 4 MB phone photo and the page doubles in weight. Two defences: generate and serve derivatives automatically rather than serving the original, and say so in the handover with a recommended maximum upload size.