Run any slow website through a speed test and the report almost always points at the same culprit: images. Unoptimized photos routinely account for 60–80% of a page’s total weight, and every extra megabyte costs you visitors — studies consistently show bounce rates climbing as load time passes three seconds. The good news: you don’t need expensive tools or deep technical knowledge to fix this. You need three decisions made in the right order.
Decision 1: resize before anything else
A photo from a modern phone is 4000–8000 pixels wide. If your content column is 800 px wide, the browser is downloading a file 5–10× larger than it can display — no amount of compression fixes that. Resizing is the biggest, safest win. Export images at 2× their display width at most (1600 px for an 800 px column) to cover sharp retina screens, and never larger. Our image resizer does this in the browser with no upload.
Decision 2: pick the right format for the job
Each format was designed for a different kind of image, and mismatching them is where most sites lose megabytes:
- Photographs → JPEG or WebP. Gradients and noise compress beautifully. A 3000 px photo at quality 80 lands around 300–500 KB.
- Screenshots, logos, flat graphics → PNG. Sharp edges and text stay crisp; JPEG’s blocky artifacts appear around letters.
- Anything with transparency → PNG or WebP (JPEG has no alpha channel).
- Modern browsers only? → WebP. It beats JPEG by 25–35% at the same visual quality and handles transparency too. Every current browser supports it; our JPG to WebP and PNG to WebP converters make the switch one drag-and-drop away.
Decision 3: find your quality floor
Quality settings are not linear. Dropping JPEG from 100 to 85 saves roughly half the file size with differences almost nobody can see. Going below 70 is where eyes start noticing — edges soften, skies get blotchy. The practical sweet spot for web photos is 75–85. For hero images where quality sells the product, stay near 85; for thumbnails and gallery grids, 70–75 is plenty.
A five-minute workflow that works for any site
- Resize to 2× display width (e.g., 1600 px for an 800 px column).
- Convert photos to WebP (or JPEG if you need older software support).
- Compress at quality ~80.
- Check the result at 100% zoom — if it looks fine, ship it.
- Bonus: set explicit width/height attributes so the browser reserves layout space and avoids layout shifts.
Doing this across a 40-image site commonly cuts total page weight from 15+ MB to under 3 MB — with no visible difference to your readers. Speed tools will notice, and so will your visitors.