Images are usually the heaviest thing on a web page. A single photo straight off a phone camera can weigh 4–8 MB — more than the entire rest of the page combined. Compressing it properly can cut that by 70–90% with no visible difference. Here's how to do it right.
1. Start with the right format
Format choice matters more than any compression slider:
- JPEG — photos and anything with gradients. Small files, universal support.
- PNG — screenshots, logos, images that need transparency. Lossless, so bigger files.
- WebP — the modern all-rounder. Typically 25–35% smaller than JPEG at the same visual quality, supported by every current browser.
- SVG — icons and simple illustrations. Infinitely sharp and usually tiny.
If you're unsure: photos → WebP (or JPEG), UI graphics → PNG or SVG.
2. Resize before you compress
This is the step most people skip, and it's the biggest win. If your page displays an image at 800 pixels wide, there is no reason to ship a 4000-pixel original — the browser just throws the extra pixels away. Resize to roughly 2× the largest display size (for sharp rendering on high-DPI screens) and you've often already cut the file by 80%.
3. Choose a sensible quality level
Lossy compression (JPEG/WebP) has a quality setting from 0–100. The visual difference between 100 and 80 is almost impossible to see; the file-size difference is huge. Good rules of thumb:
- 80–85 — safe default for photos. Visually indistinguishable from the original for most content.
- 65–75 — great for thumbnails, backgrounds and previews.
- Below 60 — visible artifacts start appearing on detailed images. Use only when size matters more than fidelity.
4. Watch out for hidden weight: metadata
Camera photos carry EXIF metadata — GPS coordinates, camera model, timestamps. It adds weight and, more importantly, can leak your location. Good compressors strip it by default. If yours doesn't, strip it separately before publishing images anywhere public.
5. Compress in the browser, not in the cloud
Most "free online compressors" upload your images to their servers. That's slow, and for anything sensitive — ID documents, contracts, unreleased product shots — it's a privacy problem. Modern browsers can do the entire job locally: the image never leaves your machine.
That's exactly how the image tools on ToolOrbit work — compression, resizing and format conversion all run in your browser, with nothing uploaded. It's free and there's no sign-up.
A quick before/after checklist
- Resize to ~2× display width
- Convert photos to WebP (or JPEG at quality 80)
- Strip metadata
- Check the result at 100% zoom — if you can't see a difference, go one step lower and check again
Do this for every image on a page and it's common to take a 10 MB page down under 1 MB — the single cheapest performance win on the web.