How In-Browser Image Processing Works (HTML5 Canvas, OffscreenCanvas, and Web Workers)

1. The Legacy Paradigm: Sending Uploads to Cloud Servers

Traditional conversion sites require uploading multi-megabyte files across the internet to an AWS EC2 instance running ImageMagick or Sharp. This creates latency, network bottlenecks, and privacy liabilities.

2. The Modern Trio: createImageBitmap, OffscreenCanvas, and Workers

Modern JavaScript provides everything necessary for high-performance image processing:

• createImageBitmap(): Decodes image files directly from Blobs asynchronously off the main thread.
• OffscreenCanvas: Allows canvas rendering operations (drawing, filtering, resizing) inside Web Workers without touching the DOM.
• Web Workers: Background threads that handle intensive loops without dropping UI frames.

3. The Architecture of Squeeze

Squeeze dispatches conversion tasks to a pool of background Web Workers matching your CPU core count (navigator.hardwareConcurrency). Each worker handles an image in parallel:

1. The source file is read as an ArrayBuffer.
2. Pixels are decoded and rescaled via bicubic canvas operations.
3. Mathematical SSIM quality scoring checks perceptual fidelity.
4. The target format Blob is produced and bundled into a ZIP archive using JSZip.

Experience In-Browser Speed

• Launch Squeeze In-Browser Converter and test batch processing.
• View Squeeze Developer API & SDK Architecture.

Authoritative References

• MDN Web Docs: OffscreenCanvas API Reference
• W3C Web Workers Specification