If your website is slow, the most likely single culprit is images. On most sites we audit, images account for 50–80% of page weight, and the fix is almost always safe, fast, and reversible.
Why images are the problem
A hero image saved from a template or camera can be 2–5 MB. Multiply by the images on a page and you’ve built a slow site before you’ve written a word of text. A typical site can drop from 5.8s load time to 1.2s just by doing this guide properly.
The four steps
1. Serve the right format
Use WebP (or AVIF where supported) instead of JPEG/PNG. Modern formats compress far better at the same quality. The instant win: converting a screen of JPEGs to WebP usually cuts 50-60% weight.
2. Right size, not huge
Never serve a 4000px-wide photo into a 600px box. Render at the size it’s displayed (and a factor for retina). Tools like srcset let the browser pick the right size per device.
3. Compress without visible quality loss
A JPEG at quality 80 looks the same at a glance and weighs a fraction. Compression is not a quality killer — unnecessary weight is. Aim for these targets:
| Image type | Target weight |
|---|---|
| Hero image | under 150 KB |
| Content image | under 80 KB |
| Icons / logos | under 30 KB (often < 10 KB) |
4. Do something while it loads
width/height attributes (kills layout shift / CLS) and loading="lazy" so scrolled images wait to load.
Tools you can use today
- Squoosh — free browser tool, great for one-offs
- ImageMagick / Squoosh for batch work
- a CMS plugin that resizes and converts at upload (the sustainable option)
- For a measure-before-after sanity check, Lighthouse
The part that keeps working
Image optimization done once doesn’t stay done — new uploads, new pages, and sliders add weight again. That’s why it’s a recurring item in Growth Care, not a one-time project.
Want to see the before/after weight numbers for your own site? Run the free audit and we’ll show you exactly how many megabytes your images add to every page.