How do I compress an image in the browser before uploading?

Read the file from an input element, pass it to compress(file, { quality, maxWidth }), and upload result.file. Everything runs client-side — the image never leaves the browser until you upload it. See the quick start in the documentation.

How do I convert a HEIC image to JPEG or WebP in JavaScript?

Pass the .heic or .heif file directly to compress(file, { format: "auto" }). Compresso decodes HEIC natively on Safari and via a lazy WASM decoder elsewhere, then outputs a standard web format.

Why did my compressed image get bigger than the original?

With most tools, re-encoding an already-efficient source (like an iPhone HEIC) to JPEG can inflate it. Compresso guarantees this never happens on lossy output: the file is capped at the source size, and on browsers without WebP/AVIF it reduces resolution instead of ballooning the file.

Does it need a server or backend?

No. Compresso is 100% client-side (Canvas API). No servers, no API keys, no image ever uploaded to a third party.

Does it work with React, Vue, and Next.js?

Yes — it is framework-agnostic. Import compress from compresso.js in any upload flow. Examples for React, Vue, Svelte, Angular, and Next.js ship in the repository.

How do I compress many images in parallel without blocking the UI?

Import createPool from compresso.js/pool — it runs a Web Worker pool with the same API, falling back to the main thread automatically where Workers are unavailable.

My site has a strict CSP — why does HEIC input fail?

It is usually a missing wasm-unsafe-eval in script-src (the HEIC decoder is WASM-based), or a missing worker-src self if you use compresso.js/pool. See the CSP section in the documentation for a full policy example.

Frequently Asked Questions

Direct answers about Compresso, the free browser-native image optimizer and 3.6 KB JavaScript library.

Open the app Read the documentation

How do I compress an image in the browser before uploading?: Read the file from an input element, pass it to compress(file, { quality, maxWidth }), and upload result.file. Everything runs client-side — the image never leaves the browser until you upload it. See the quick start in the documentation.
How do I convert a HEIC image to JPEG or WebP in JavaScript?: Pass the .heic or .heif file directly to compress(file, { format: "auto" }). Compresso decodes HEIC natively on Safari and via a lazy WASM decoder elsewhere, then outputs a standard web format.
Why did my compressed image get bigger than the original?: With most tools, re-encoding an already-efficient source (like an iPhone HEIC) to JPEG can inflate it. Compresso guarantees this never happens on lossy output: the file is capped at the source size, and on browsers without WebP/AVIF it reduces resolution instead of ballooning the file.
Does it need a server or backend?: No. Compresso is 100% client-side (Canvas API). No servers, no API keys, no image ever uploaded to a third party.
Does it work with React, Vue, and Next.js?: Yes — it is framework-agnostic. Import compress from compresso.js in any upload flow. Examples for React, Vue, Svelte, Angular, and Next.js ship in the repository.
How do I compress many images in parallel without blocking the UI?: Import createPool from compresso.js/pool — it runs a Web Worker pool with the same API, falling back to the main thread automatically where Workers are unavailable.
My site has a strict CSP — why does HEIC input fail?: It is usually a missing wasm-unsafe-eval in script-src (the HEIC decoder is WASM-based), or a missing worker-src self if you use compresso.js/pool. See the CSP section in the documentation for a full policy example.

GitHub · npm