Browser image compression is a decode-transform-encode pipeline: read a File, decode compressed bytes into pixels, resize or edit on Canvas, then encode a new JPEG, WebP, PNG, or AVIF Blob.
The quality slider controls only part of the result. Pixel dimensions, source noise, format, alpha, metadata, repeated encoding, and codec support often matter more than changing quality from 0.82 to 0.78.
The local pipeline
createImageBitmap, an img element, or ImageDecoder decodes the File. Canvas provides a normalized surface for resize, crop, rotation, and compositing. Canvas.toBlob or a local codec creates output.
The Blob can be previewed through createObjectURL and downloaded. No upload is necessary because each stage runs in browser APIs.
const bitmap = await createImageBitmap(file);
ctx.drawImage(bitmap, 0, 0, width, height);
const blob = await new Promise<Blob>((resolve) =>
canvas.toBlob((value) => resolve(value!), 'image/webp', 0.82)
);Resize before aggressive quality loss
A 4000 × 3000 photo contains 12 million pixels; a 1000 × 750 display needs 750,000, one sixteenth as many. Removing unnecessary dimensions often saves more with fewer artifacts than forcing full resolution to very low quality.
Preserve aspect ratio unless distortion is intended. Screenshots and line art need different filtering and format choices from photographs.
Quality is an encoder hint
Canvas quality is generally a 0-to-1 hint for lossy encoders, not a universal visual percentage. Quality 0.8 can produce different size and artifacts across browsers and formats.
PNG is normally lossless and may ignore quality. AVIF may need a WASM codec when Canvas encoding is unavailable. Verify the returned Blob type instead of assuming the requested MIME worked.
Format changes the answer
JPEG is effective for photos without transparency; PNG preserves sharp edges and alpha but can be large for photos; WebP supports lossy, lossless, and alpha; AVIF can be efficient but slower.
Text screenshots may look poor as low-quality JPEG. Transparent images cannot become ordinary JPEG without compositing a background.
Metadata, orientation, and color
Canvas re-encoding commonly drops EXIF such as GPS, camera settings, timestamps, and copyright. That may improve privacy but remove needed provenance. Orientation must be applied before export.
Color profiles and wide-gamut data may be normalized. Print, medical, legal, and archival workflows need controlled software and profile verification.
Memory and verification
Compressed files decode to width × height × roughly four RGBA bytes, plus source, Canvas, intermediate, and output buffers. Set pixel limits, process batches sequentially, use Workers where practical, close ImageBitmap, and revoke stale URLs.
Inspect text, faces, gradients, and edges at intended size and 100%. Verify dimensions, MIME, alpha, orientation, and bytes. Avoid repeated lossy exports.
- Resize before lowering quality heavily.
- Keep the original.
- Verify output MIME and dimensions.
- Check metadata behavior.
- Avoid repeated JPEG/WebP encoding.
Key takeaways
Reliable compression combines dimension reduction, a content-appropriate format, measured quality, explicit metadata behavior, memory controls, and output inspection. Canvas and Blob provide the core path.