How I Built an In-Browser Image Suite with WebAssembly and Web Workers (Zero Server Uploads)

Three months ago, a former senior frontend engineer found themselves unemployed while navigating the frustrating task of formatting passport photos, converting iPhone HEIC files, and compressing document scans. Frustrated by the limitations of existing online tools, they decided to create a local-first solution: IMG Free Toolkit, an image suite that runs entirely in the client's browser with no server uploads.

This article breaks down the architecture behind IMG Free Toolkit and the technical challenges faced during development.

The core architecture of IMG Free Toolkit relies on zero server uploads, meaning files never leave the user's device. Instead, the file is converted into a raw byte array, which is processed by either a Web Worker or a WebAssembly (WASM) binary. This approach ensures privacy, as sensitive documents are processed locally, and reduces infrastructure costs, as static hosting via a CDN yields virtually negligible compute costs even with high user traffic.

To handle heavy image compression tasks, the platform offloads CPU work to Web Workers and OffscreenCanvas. This prevents the browser's main thread from freezing, which would cause scroll stuttering and display "Page Unresponsive" alerts. The worker computes lossy binary approximations without affecting the main UI thread, allowing the UI to remain responsive at 60 FPS.

For format conversions, the toolkit uses WebAssembly binaries compiled from C or Rust code. This enables the browser to decode raw image streams into pixel arrays and re-encode them into web-friendly formats like JPEG, PNG, and WebP. The toolkit also supports less common formats such as HEIC and AVIF by leveraging WASM-based converters.

Incorporating on-device OCR, IMG Free Toolkit integrates Tesseract.js, which downloads trained OCR language models and caches them using the Cache Storage API and IndexedDB. This allows the browser to process tabular structures directly into .xlsx or .csv files without sending user screenshots to external computer vision cloud APIs.

While building IMG Free Toolkit, the developer encountered various engineering challenges. Mobile Safari has strict memory limits, and processing a dozen 30MB photos simultaneously on iOS could cause the browser tab to be terminated. To address this issue, they implemented a dynamic task scheduler that adjusts worker concurrency based on the device's hardware capabilities and downsamples preview buffers to prevent memory issues.

Another challenge was balancing the initial bundle size of WASM encoders (like MozJPEG) against the compression efficiency they provide. The developer continuously tuned the tradeoff between the download size of the WASM binaries and the quality of the compressed files.

To demonstrate the toolkit's capabilities, a live demo is available at IMG Free Toolkit. Users can upload a 5MB+ image and see that no image data is sent over the wire, with the entire processing happening locally within the browser. The developer welcomes feedback on additional image workflows or formats they would like to see added and is open to discussing low-memory detection strategies in Web Workers for mobile devices.