Compressing and converting images without uploading them

Images are still the largest part of most pages, and most of that weight is avoidable.

Resize before you compress

An image displayed at 800px wide does not need to be 4000px wide. Downscaling first usually saves more bytes than any quality setting, and it is lossless in perceived terms.

Pick the right format

• **WebP** — the default for photos and screenshots on the web today. Typically 25-35% smaller than JPEG at the same visual quality.
• **JPEG** — safe, universal, fine for photographs.
• **PNG** — only when you need lossless output or real transparency with sharp edges.
• **SVG** — anything that is geometry rather than pixels. Optimise it; exported SVGs are full of editor metadata.

How browser compression works

The browser decodes the image, draws it to a canvas at the target size, and re-encodes it with `canvas.toBlob(type, quality)`. Because everything happens locally, nothing is uploaded — and the same code path works offline.

Quality settings that hold up

Start at 0.8 for photos and drop until you see artefacts at 100% zoom. Flat illustrations tolerate far more compression than faces and gradients.