If your site feels slow, it is probably your images. This guide breaks down where the milliseconds go and gives you a prioritized checklist to reclaim them.

Users decide about a website in under three seconds, and images decide about your loading time on almost every page. The average page ships more than a megabyte of imagery — most of it unwatched weight: oversized dimensions, outdated formats, redundant quality. The millisecond math below shows where it all goes, and the checklist reclaims it.

Where loading time actually goes

A page loads in stages: HTML arrives, then referenced resources queue and download, then the browser paints. Images enter the queue with the highest byte-cost of anything on the page. Cutting an image from 1.2 MB to 180 KB is not a marginal gain — on a mid-range phone over average mobile networks, that single change can remove a full second from what the visitor experiences.

The five levers, ranked by impact

1. Right-size dimensions (biggest win)

A 4000px photo displayed at 900px wastes 80%+ of its bytes. Resize to actual display width — the bulk resizer makes it a one-pass job for the whole media library.

2. Modern formats

WebP cuts 25–35% versus JPEG at the same quality; AVIF roughly doubles the savings again. Batch-convert once with the WebP converter, benefit every day after.

3. Appropriate compression

Quality 70–85 is the invisible zone — files collapse, viewers notice nothing. The compress tool previews the trade-off per image so you can verify before batching.

4. Lazy loading (with one exception)

Native loading="lazy" defers everything below the fold. Exclude your LCP hero — deferring it delays the very paint you are optimizing.

5. Caching and CDN

Once bytes are minimal, deliver them from the edge. Any competent CDN turns a 300 ms origin round-trip into a sub-50 ms cache hit for repeat visitors.

A 45-minute optimization sprint

Measure (5 min): PageSpeed Insights on your three most-visited pages; note image flags.
Export (10 min): pull the media library’s heaviest offenders — sort by file size, take the top 50.
Process (15 min): resize → convert → compress through the Pixly pipeline in three batch passes.
Re-upload (10 min): replace originals; keep alt text intact.
Verify (5 min): re-run PageSpeed; eyeball the top pages on a real phone.

Beyond the checklist

Responsive images: srcset lets phones download phone-sized files.
Explicit dimensions: width/height attributes prevent layout shift (a Core Web Vitals component).
Preload the hero: <link rel="preload" as="image"> for the above-the-fold image pulls it into the first queue.
Strip metadata: EXIF blocks are dead weight on published images — remove them in the same batch.

Frequently asked questions

Will optimized images look worse?

Not at correct settings. The entire discipline is built around discarding detail eyes cannot perceive at display size. Verify with the before/after comparison tool if skeptical — most people cannot score their own compressed images above chance.

Is a CDN required?

Not required — after optimization, many small sites are fast enough from a single origin. A CDN multiplies an already-good foundation; it cannot rescue a 5 MB hero image.

How often should I re-audit?

Quarterly, plus after any theme or template change. Content teams drift back to heavy uploads without a standing pipeline.

Final thoughts

Website speed is not a single technology decision — it is the compounding result of hundreds of small file-level choices. Make the right choices automatic with a standing optimization pipeline, and every future page loads fast by default. The free Pixly toolbox exists precisely so that pipeline never costs a cent.

Website Speed: How Image Optimization Makes or Breaks Your Loading Time