If you want to make a website faster and you only have time for one thing, optimise your images. On most pages they're the single heaviest category — often more weight than all the code combined — which means they're also the biggest, easiest win. Best of all, you can usually halve image weight with zero visible quality loss.
Why images dominate page weight
A modern page is mostly pictures. A few unoptimised photos straight off a phone or a stock site can each be several megabytes, while your entire HTML/CSS/JS might be a fraction of that. Heavy images directly hurt your LCP (the hero image is often the LCP element) and your overall load time.
The four levers
| Lever | What it does |
|---|---|
| Compress | Strip wasted bytes — often huge savings, no visible change |
| Resize | Don't serve a 4000px image into a 400px slot |
| Modern formats | WebP/AVIF are far smaller than JPEG/PNG |
| Lazy load | Defer off-screen images until needed |
1. Compress
Most images carry far more data than the eye can see. Compression removes it. Lossless compression saves bytes with zero quality change; lossy (at a sensible quality level) saves much more with no perceptible difference. This alone often cuts file size dramatically.
2. Resize to the actual display size
A classic mistake: uploading a 4000×3000 photo and displaying it at 400px wide. The browser downloads the whole giant file and shrinks it — wasting most of those bytes. Serve images at (or near) the size they're shown, and use responsive images (srcset) to send smaller versions to smaller screens.
3. Use modern formats
| Format | Notes |
|---|---|
| JPEG/PNG | Universal, but larger |
| WebP | ~25–35% smaller than JPEG, widely supported |
| AVIF | Even smaller, great quality, growing support |
Switching photos to WebP (with a fallback) is one of the highest-ratio changes you can make.
4. Lazy-load — but not the hero
Lazy loading defers off-screen images until the user scrolls near them, so the initial load is lighter. One critical exception:
Never lazy-load your LCP image. The largest above-the-fold image (your hero) should load immediately — even preloaded. Lazy-loading it delays the very thing LCP measures, hurting your score. Lazy-load everything below the fold instead.
A quick checklist
| Do | Why |
|---|---|
| Compress every image | Big savings, invisible to users |
Serve at display size (+ srcset) | Stop wasting bytes on oversized images |
| Use WebP/AVIF with fallback | 25%+ smaller for free |
| Set width/height on every image | Also prevents layout shift (CLS) |
| Lazy-load below-the-fold only | Lighter initial load, fast hero |
Notice that setting dimensions does double duty: it speeds loading and prevents the layout shift that comes from images popping in.
The bottom line
| In one line | |
|---|---|
| Why | Images are the heaviest part of most pages. |
| How | Compress, resize, modern formats, lazy-load (not the hero). |
| Bonus | Setting dimensions also fixes CLS. |
| Payoff | Often halves page weight with no visible quality loss. |
Image optimization is the rare fix that's enormous in impact and small in effort. Compress, right-size, switch to WebP, and lazy-load below the fold — and your pages get dramatically lighter while looking exactly the same.
Related: How to speed up your website, LCP explained; test with the free Core Web Vitals checker.