How do you use these nature images without slowing a site down? – Cheap Nature Images

An image-heavy page is slow for four reasons, and all four are fixable in an afternoon. The size of the original file is not one of them, because you should never be serving the original.

One: serve the size you display

The commonest mistake by a wide margin. A 6000-pixel photograph rendered into a 400-pixel card is roughly two hundred times more data than the layout needs.

Resize to the widths you actually use, generate a small set, and let the browser choose with srcset and sizes. Three or four widths is enough for almost any layout.

Two: use a modern format

WebP is supported everywhere that matters and is typically 25 to 35 per cent smaller than JPEG at matched quality. AVIF is smaller again and slower to encode.

Serve them with a JPEG fallback through a picture element and you have covered every browser in use.

Tune quality against the smoothest region of the frame. Sky and water gradients band before foliage does, so a frame that is mostly sky needs a higher setting than one that is mostly leaves.

Three: declare dimensions

Every image element needs width and height attributes, or an aspect-ratio in CSS. Without them the browser cannot reserve space, and the page jumps as each picture arrives. That jump is measured directly by Core Web Vitals and it is entirely avoidable.

Four: load lazily, except the first one

Everything below the fold gets loading="lazy". The hero image does not: it should be eager, and ideally carry fetchpriority="high", because it is almost always the element that decides your Largest Contentful Paint.

Lazy-loading the hero is a very common own goal. It delays the one image the score is measuring.

Caching

Serve derived images from a path that never changes content, and set a long immutable cache header. When you change an image, change its filename rather than its cache policy.

What this site does

The same things, which is why the galleries load quickly despite being nothing but photographs: a responsive ladder at seven widths, WebP, explicit dimensions on every element, lazy loading below the first row, and a long immutable cache on the derivative path.

None of it is clever. It is just all four, done consistently.

Measuring rather than guessing

Do not trust a redesign to feel faster. Load the page in a private window, on a throttled connection, and read the numbers.

The three that matter for image work are Largest Contentful Paint, which is usually your hero; Cumulative Layout Shift, which is almost always missing dimension attributes; and total transferred bytes, which is almost always oversized images. Fixing those three fixes the page.

Measure with a real request, not a cached one. A second load tells you nothing about a first visitor.