Images: cutting half the page weight in one sprint

Formats, dimensions, lazy loading and priorities. A practical order of work that halves page weight without losing quality.

Performance · Published: 27 May 2026 · 3 min read · Анна Ковалёва

On a typical site images account for 50–70% of page weight. And they are almost always served at a resolution nobody will see, in a format from a decade ago, and without declared dimensions. It is the most predictable source of speed there is.

Step 1: stop shipping pixels nobody sees

A 2400 px wide image in a 600 px container is sixteen times the data required — area grows quadratically. The fix is srcset built around your real layout breakpoints:

width and height are mandatory: without them the browser does not know the aspect ratio and the layout jumps — a direct contribution to CLS.

Step 2: change the format

AVIF averages 40–50% lighter than JPEG at the same quality, WebP 25–30%. Every current browser supports both. A <picture> block gives you a fallback:

For interface screenshots and charts with flat fills, PNG is not rarely lighter than AVIF — measure rather than follow the rule blindly.

Step 3: set priorities

Lazy loading is not free. loading="lazy" on a first-screen image slows LCP down, because it defers the single most important request. The rule is simple:

images above the fold — fetchpriority="high", no lazy;
everything else — loading="lazy" and decoding="async".

Step 4: delete what nobody needs

The most effective optimisation is not optimising but removing. The decorative background nobody sees on mobile; the eight-banner carousel whose third slide reaches 4% of users; icons shipped as PNG that should be SVG.

What to measure

Look at two numbers rather than a "score": image weight per page and time to LCP on a mobile network. If weight halved and LCP did not move, the bottleneck is not the images but the request queue or the server response, and optimising graphics further is pointless.

Set a budget — say, no more than 400 KB of images on a listing page. A budget enforced in CI works better than any agreement.

Check how much of this is on your own site

A free scan surfaces broken links, JS errors and performance problems in about a minute.

Run a scan