Allowing users to upload uncompressed 15MB smartphone photos directly to your cloud storage destroys bandwidth, increases server costs, and delivers a sluggish User Experience (UX).
Traditional client-side compression libraries execute heavy pixel manipulations on the Main Thread, freezing the DOM and causing noticeable UI lag.
To address this performance bottleneck, I created Compressly — a zero-dependency, micro-sized (<3KB) image compression library that offloads processing away from the main thread.
How It Works Under the Hood:
Web Worker Offloading: Offloads heavy mathematical image transformations to a background Web Worker thread, keeping the main thread running smoothly at 60 FPS.
OffscreenCanvas API: Utilizes hardware-accelerated canvas rendering directly inside worker threads without DOM dependencies.
Smart Formatting: Auto-converts heavy JPEGs/PNGs into optimized WebP formats while preserving EXIF orientations.
Performance Impact:
File Reduction: Converts a 14.2 MB raw smartphone photo down to ~380 KB in under 800ms.
Main Thread Blocking: 0ms (completely asynchronous).
TypeScript
import { compressImage } from 'compressly';
const optimizedFile = await compressImage(file, {
quality: 0.8,
maxWidth: 1920,
convertFormat: 'webp',
});
Offload compression to the client without sacrificing frame rates.
🔗 Try Compressly on npm: npmjs.com/package/compressly
Top comments (0)