How Web Workers & OffscreenCanvas Made Client-Side Image Compression 10x Faster

Modern web development demands lightning-fast performance, and client-side image compression is a crucial aspect of achieving this. Traditional methods that run image transformations on the Main Thread can lead to sluggish User Experiences, slow loading times, and high bandwidth costs. To overcome these challenges, I developed Compressly – a compact, dependency-free image compression library that operates outside the main thread.

At the core of Compressly lies the innovative use of Web Workers and OffscreenCanvas API, both designed to improve web performance. Web Workers run background tasks in separate threads, freeing the Main Thread to maintain smooth 60 FPS rendering. The OffscreenCanvas API, on the other hand, provides hardware-accelerated canvas rendering within these worker threads, eliminating the need for DOM dependencies.

Compressly's smart formatting feature ensures that heavy JPEG and PNG files are automatically converted to the more efficient WebP format, while preserving EXIF image orientations. This optimization process transforms a 14.2 MB raw smartphone photo into a compact 380 KB file in under 800 milliseconds, with no impact on the Main Thread.

Using Compressly is as simple as importing the compressImage function and invoking it with the necessary parameters, such as the target file, compression quality, maximum width, and desired format. The entire compression process is completely asynchronous, ensuring that the Main Thread remains unblocked and free to handle other critical tasks.

By offloading image compression to the client, developers can significantly reduce bandwidth usage, minimize server costs, and deliver a superior User Experience. Compressly's micro-sized size (just 3KB) makes it an ideal solution for web projects of all scales. Give Compressly a try on npm (npmjs.com/package/compressly) and experience the speed and efficiency of modern web development.