How to compress images for the web without losing quality

Nine times out of ten, when a page feels slow, it's the images. Not the JavaScript, not the server — a hero photo someone exported straight out of their camera at 4 MB and dropped in. The fix isn't clever. It's picking the right format and the right quality, and not shipping bytes nobody can see anyway.

Here's the one-line version, if you're in a hurry: convert your JPGs and PNGs to WebP at quality 80. That alone usually cuts a file by half to four-fifths with nothing you'd notice by eye. Browsers have supported WebP for years. Everything below is just the reasoning, and the few cases where you'd do something else.

Three things shrink a file (only one costs you anything)

Dimensions. A 4000-pixel-wide photo sitting in a 1200-pixel slot is three-quarters wasted. Resize it down first and you've often done most of the work before you touch a quality slider.

The encoder. This is the free lunch. MozJPEG squeezes a JPG 10–20% smaller than your average tool with no visible difference; WebP and AVIF use genuinely newer compression and go further still. Same image, same quality, smaller file — purely because the maths is better.

Quality. The only knob that actually trades away pixels for bytes. The trick is knowing where the floor is before you hit it (more on that below).

Stack all three and a 4 MB phone photo becomes 200 KB: resize to 1600px, re-encode as WebP, set quality to 80. Done.

Which format, honestly

Format	Reach for it when	Avoid it for
WebP	Almost everything on the web. Great compression, transparency, universal browser support.	Email, the odd image editor that won't import it.
AVIF	You care about every kilobyte and your users are on recent browsers. ~20–30% smaller than WebP.	Older tooling; it's also slower to encode.
JPEG	Maximum compatibility — ancient browsers, email clients, "just works everywhere."	Anything with transparency or crisp edges.
PNG	Logos, icons, screenshots with text, anything needing transparency.	Photos. A photo as PNG is 5–10× the size for zero benefit.

My rule for 2026: WebP by default, AVIF when bytes really matter, JPEG when you need it to open literally anywhere.

What the quality number actually means

Quality isn't a percentage of anything — it's an encoder dial. Roughly:

• 90 — you cannot tell it from the original. Still 30–40% smaller. No reason to go above this.
• 80 — the sweet spot for photos. Press your nose to the screen and you might find something on a gradient. Sit back and it's perfect.
• 70 — flat areas like skies and walls start to show banding.
• 60 and below — visibly rough. Fine for thumbnails, not for anything you care about.

And always judge it at display size. A quality-75 JPG at 200×200 is indistinguishable from quality-95. The same file blown up to 2000px is a different story.

Doing it in the browser, in about 30 seconds

You don't need Photoshop or a command line:

1. Open the Image Compressor and drag a photo in — it loads instantly, nothing uploads.
2. Pick WebP (or AVIF for the smallest result).
3. Set quality to 80 and look at the before/after side by side.
4. Nudge it if you want, then download — one file, or a whole batch as a ZIP.

It runs the same WebAssembly codecs the Squoosh team built (MozJPEG, OxiPNG, libwebp, libavif), which is why the output tends to come out smaller than most online compressors. And because it's all happening on your machine, your photos never leave it.

Here's the same 4.2 MB phone photo through each step:

That's a 93% cut with nothing lost at the size you'll actually show it. Do that across a ten-image page and you've turned 40 MB into 4.

The handful of mistakes worth avoiding

Don't re-compress an already-compressed file over and over — each pass throws away a little more; start from the original. Don't save photos as PNG. Don't reach for quality 100, ever — it's bytes for nothing. And don't trust a "compressed 90%!" number without looking; a tiny file that's visibly mush isn't a win.

Get the format and the quality right and you get faster pages, better Core Web Vitals, lower bandwidth bills — no CDN, no build step, no paid plan required. Try your own photo in the Image Compressor and see what the numbers look like on a file you recognise.