How Large Images Affect Website Performance

Images are usually the heaviest thing on a web page, often more than half of total transferred bytes. That makes them the first place to look when a site feels slow.

What actually gets slower

Largest Contentful Paint measures when the biggest visible element finishes rendering, and on most content pages that element is an image. A 3 MB hero image on a mid-range phone over mobile data can push LCP past four seconds on its own.

There is also a decode cost. Even after the bytes arrive, the browser must decompress the image into memory. A very large photo takes real CPU time to decode, and on a low-powered device that delay is visible.

The bandwidth argument

Visitors on metered connections pay for every megabyte. A page with ten unoptimised photos can transfer 15 MB. The same page with resized, modern-format images might transfer 900 KB and look identical.

Fixes ranked by impact

• Resize images to their display size; this usually removes most of the weight.
• Convert to WebP or AVIF.
• Add srcset and sizes so small screens download small files.
• Lazy-load everything below the fold, but never the hero.
• Set explicit width and height to prevent layout shift.
• Preload the hero image so it starts downloading immediately.

Measuring rather than guessing

Open your browser developer tools, load the page with the cache disabled and throttling enabled, and sort the network panel by size. The worst two or three files are almost always responsible for the bulk of the problem, and fixing those is faster than optimising everything at once.