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

javascript, #react, #webdev, #opensource, #architecture