Compress images on the client.
$0 Cloud Server Costs.
The ultra-fast client-side compression library for Next.js, React, and modern web apps. Downscales large files, fixes iPhone EXIF rotation, and runs in background Web Workers with zero main-thread lag.
Intercept raw media in the browser before network transmission.
You are testing the compressly npm library executing directly on your CPU/GPU via Web Workers — not a cloud SaaS.
npm i compresslyTest the npm package live in your browser
Drop single or multiple images. Everything runs 100% locally on your device with zero server latency.
SDK Engine Controls
Drop single or multiple images here
Select 1 or bulk 20+ images of any resolution or size. Watch them transform into lightweight web assets in milliseconds.
Why Client-Side Optimization Wins
Compressing on the user's device before sending bytes over the wire fundamentally redefines your cloud economics and user experience.
Upload Raw ➔ Process on Server
Optimize on Client ➔ Upload Tiny File
Copy Prompt for AI Assistants
Let Cursor, Claude 3.7, Copilot, or ChatGPT implement Compressly in your codebase in seconds.
Copy AI Prompt for Cursor & Claude
Paste this prompt into Cursor, Claude 3.7, Copilot, or ChatGPT to implement Compressly automatically.
I want to integrate client-side image compression in this project using the `compressly` npm package.
Please do the following:
1. Install the package:
`pnpm add compressly` (or npm i compressly)
2. In my image upload handler, before appending the selected File to FormData or state:
- Import `compressImage` from "compressly".
- Validate that the file is an image.
- Run `const optimizedFile = await compressImage(file, { maxWidth: 1920, quality: 0.82, targetSizeMB: 1 });`
- Send `optimizedFile` to the backend endpoint.
3. If handling multiple images, use `compressImages(files, { concurrency: 3 })`.
4. Add a subtle loading or progress indicator while optimizing.Engineered for Performance & DX
Built from scratch to eliminate bundle bloat, SSR crashes, and lag from legacy image compression libraries.
Ultra-Lightweight (< 3 KB)
Zero runtime dependencies. 95% smaller bundle footprint than alternative libraries (~52 KB).
Off-Thread Web Worker
Processes 15MB+ camera photos in background threads via OffscreenCanvas. 60 FPS buttery smooth UI even on low-end phones.
Adaptive Target Size Loop
Pass targetSizeMB: 0.5 and let Compressly automatically optimize quality and bounds to guarantee the output size.
Concurrent Batch Processing
Upload 50 images at once with built-in concurrency pools and batch progress monitoring without blowing up browser RAM.
Auto EXIF Orientation
Fixes vertical iPhone photos flipping sideways using modern native browser APIs without bloating your bundle with legacy EXIF parsers.
SSR-Safe (Next.js First)
Built with ESM & CJS exports and SSR guards. No window is not defined errors in Next.js or Nuxt.
Dead-Simple API
One function call is all it takes to handle any image upload gracefully.
import { compressImage } from "compressly";
// Compress any image down to web-ready format in milliseconds
const compressedFile = await compressImage(file, {
maxWidth: 1920, // Keep high resolution
quality: 0.82, // 82% quality (indistinguishable, -85% size)
targetSizeMB: 0.5, // Guarantee <= 500 KB output
});
// Upload to your backend
const formData = new FormData();
formData.append("photo", compressedFile);
await fetch("/api/upload", { method: "POST", body: formData });Feature & Performance Comparison
See how Compressly compares against existing npm alternatives.
| Feature / Metric | compressly | browser-image-compression | compressorjs |
|---|---|---|---|
| Bundle Size (Minified) | < 3 KB | ~52 KB | ~25 KB |
| Zero Runtime Dependencies | |||
| Off-Thread Web Worker (No UI Lag) | |||
| Smart Pass-through (Small images) | |||
| Adaptive Target Size Loop | |||
| Next.js / SSR Safe (Zero 'window' crashes) | |||
| Auto EXIF Orientation (iOS / Android) |
Client-Side Image Compression FAQ
Everything you need to know about offloading media optimization to the browser.
How does Compressly eliminate cloud image processing costs?▼
Compressly compresses and resizes user images directly inside the user's browser before upload using the native Canvas API and OffscreenCanvas in Web Workers, saving up to 95% on S3 storage and Lambda transformation fees.
Does Compressly block the main UI thread during compression?▼
No. Compressly executes compression pipelines inside dedicated Web Workers off the main thread with zero UI lag or dropped animation frames, even when compressing multiple high-resolution photos concurrently.
Does Compressly fix iPhone EXIF orientation issues?▼
Yes. Compressly automatically normalizes EXIF rotation for iPhone and camera photos using modern browser standards, eliminating orientation distortion without adding heavy external EXIF parsing libraries.
Is Compressly compatible with Next.js App Router and Server-Side Rendering?▼
Yes. Compressly includes robust SSR guards and universal exports (ESM & CJS), ensuring seamless compatibility with Next.js, Nuxt, Remix, and SvelteKit without 'window is not defined' errors.
What output formats are supported by Compressly?▼
Compressly supports modern WebP, standard JPEG/JPG, and PNG output formats with adaptive fallback mechanisms tailored to browser compatibility.
Can I enforce an exact maximum file size target?▼
Yes! Using the targetSizeMB parameter, Compressly performs an intelligent adaptive optimization loop to hit your target file size constraint while preserving maximal visual fidelity.