3 min read

Compress images for the web without uploading them

AVIF, WebP and MozJPEG at a quality you cannot tell apart from the original — a real before-and-after size story, done entirely on your machine.

imagesperformancewebapps

A hero image straight off a phone is easily three or four megabytes. Ship that and every visitor on a slow connection waits on it before the page settles. The fix is to recompress it, and the browser's own encoder is not the tool for the job — the JPEG that canvas gives you is tuned for speed, not size. Squeeze uses the same WebAssembly codecs Squoosh does — MozJPEG, WebP and AVIF — and the file never leaves your machine.

A real before-and-after

Take a 3.8 MB, 4032x3024 photo from a phone. Nobody displays it at that size; a full-width hero is maybe 1600 pixels across. So the first move is to cap the longest side at 1600, which alone throws away most of the pixels. Then pick a format and a quality:

That is a 3.8 MB file becoming 90 KB — better than a fortieth of the size — with no visible difference at display size. Squeeze shows the compressed size next to the original as you move the slider, so you tune by watching the number instead of guessing.

Why format and quality actually matter

The formats are not ranked simply better to worse; they trade differently.

Quality is where people overspend. The difference between quality 90 and quality 75 on a photograph is usually invisible at web size but can halve the file. Drag the slider down until you see the first artifact, then step back one — that point is your answer, and it is different for every image.

When to cap dimensions

Capping the longest side is the single biggest saving and the one most often skipped. A 4000-pixel image displayed in an 800-pixel column is sending four times the data the screen can use. Decide the widest the image is ever shown — content width, or twice that for high-DPI screens — and cap to it before you even touch quality. Compression works on what is left, so shrinking first makes every later saving compound.

The part that matters for private images

Every free image optimiser online uploads your picture to do work the browser has been able to do for years, and keeps a copy on someone's server. A product shot under embargo, a screenshot with a customer's data, a photo of a person — none of that should be pasted into a website. Squeeze decodes, re-encodes and hands the file back for download without a single request leaving the page. The codecs only load the first time you compress something, so the app stays light until you use it.

Try it

More writing