Why images are slowing down your website
On a typical content site, images account for more total bytes than scripts, stylesheets, fonts and markup put together. That makes them the least glamorous and most effective performance work available to you.
The arithmetic nobody does
Open your own site on a phone, on a mediocre connection, and count the seconds before the main image appears. That number is what your visitors experience, and it is almost never the number you see on your laptop on office wifi.
A single unoptimised photograph straight from a phone camera is commonly 4–6 MB. On a 5 Mbps mobile connection that is roughly eight seconds for one image. Put four of them on a page and you have a page nobody waits for.
The same photograph, resized to the width it is actually displayed at and compressed sensibly, is 150–250 KB. Same picture, visually identical on screen, roughly one twentieth of the weight.
Why Google cares
Largest Contentful Paint measures how long until the biggest visible element finishes rendering. On most pages that element is an image — a hero, a product shot, an article header.
LCP is part of Core Web Vitals, and Core Web Vitals feed into search ranking. Critically, Google measures it on real visitors through the Chrome User Experience Report, not in a lab. Your fast laptop does not count. The median of everyone who actually visited does.
Google's own threshold for a good LCP is 2.5 seconds. A 4 MB hero image on mobile will not get there, whatever else you do.
The three fixes, in order of payoff
1. Resize to what is displayed. This is the biggest single win and the one most often skipped. If your content column is 800 pixels wide, serving a 4000-pixel image means 96% of the data is discarded by the browser after being downloaded. Pixel count scales with area — halving the width quarters the file.
2. Use a modern format. WebP is 25–35% smaller than JPEG at the same visual quality and is supported by every current browser. This is close to free.
3. Compress sensibly. Quality around 75 is invisible in normal viewing and dramatically lighter than the 95 most export presets default to.
Do all three and a 4 MB image becomes roughly 120 KB. Do only the third and it becomes 1.5 MB, which is still too heavy.
The mistakes that undo the work
- Lazy-loading the hero.
loading="lazy"belongs on everything below the fold and nowhere near your LCP element. Lazy-loading the hero actively makes the metric worse. - Missing width and height. Without them the browser cannot reserve space, so content jumps as images arrive. That is Cumulative Layout Shift, and it is also a ranking signal.
- Letting the CMS regenerate from the original. Many platforms build their own derivatives from whatever you uploaded. Upload the optimised file as the source, not the camera original.
- No cache headers. A perfectly optimised image re-downloaded on every page view is still wasted bandwidth.