Web Workers: Offloading Heavy Compression Tasks
How to maintain a responsive user interface by executing heavy canvas processing in background threads.
SJ
Sarah Jenkins
Contributing Author · Squoosh Next BlogImage compression is computationally intensive and can block the browser main thread, causing the entire page to become unresponsive during encoding. Web Workers solve this by running scripts in background threads isolated from the main execution context. Communication happens via structured cloning of ArrayBuffers, allowing binary image data to be passed without copying when using the Transferable interface.
The Squoosh Next architecture runs each WASM codec inside a dedicated Web Worker, meaning you can continue interacting with the controls while a 40-megapixel RAW file is being encoded. The main thread receives a progress notification every 5% of encoding completion, enabling real-time progress bars without polling.
Key Takeaways
Image compression is computationally intensive and can block the browser main thread, causing the entire page to become unresponsive during encoding.
Web Workers solve this by running scripts in background threads isolated from the main execution context.
Communication happens via structured cloning of ArrayBuffers, allowing binary image data to be passed without copying when using the Transferable interface.
The Squoosh Next architecture runs each WASM codec inside a dedicated Web Worker, meaning you can continue interacting with the controls while a 40-megapixel RAW file is being encoded.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.