Why Image Processing Should Stay in the Browser: A Client-Side Architecture Guide
From Canvas pixel operations and Web Worker concurrency to image processing pipelines, this guide explains why PictKit chose a client-side architecture and how local processing protects privacy by design.
Client-side image processing means the browser handles image operations such as compression, resizing, filtering, and format conversion on the user's device. No image data is uploaded to a server. This architecture has real privacy and performance benefits, but it also has limits. This guide explains how it works and when it is the right choice.
What Client-Side Processing Means
When you use a client-side image tool, your file is read into the browser's memory. The browser uses APIs such as Canvas, OffscreenCanvas, and Web Workers to process the pixels. The original file and the result never leave the device unless you choose to download them.
How the Pieces Fit Together
Canvas and OffscreenCanvas
Canvas is used to draw and manipulate images. OffscreenCanvas allows processing to happen off the main thread, which keeps the interface responsive.
Web Workers
Web Workers run processing tasks in the background. This is useful for CPU-intensive work such as resizing large images or applying filters to many files.
File API
The File API lets the browser read local files as data without uploading them. The file is only available to the page that requested it.
Privacy and Security Benefits
- No uploads: images do not need to be transferred over the network.
- No server storage: there is no backend database or temporary folder.
- Simpler trust model: privacy is enforced by the architecture, not only by policy.
This makes client-side processing attractive for sensitive documents, private photos, and work that should not leave the device.
Performance Tradeoffs
Client-side processing depends on the user's hardware. A large photo on a low-powered phone may process more slowly than on a desktop. The browser may also limit available memory and canvas dimensions.
To handle this, PictKit uses downsampled previews, workers, and progressive rendering so the interface stays responsive while processing large images.
Limitations to Keep in Mind
- Processing power and memory vary by device.
- Some codecs or features may not be available in every browser.
- Large batches can still take time.
- Server-side processing may be better when you need centralized control or shared results.
When to Choose Client-Side Processing
Choose client-side processing when:
- Privacy is important.
- The workflow is local and personal.
- You want low infrastructure cost.
- Files should stay under the user's control.
FAQ
Does client-side processing mean images are completely private? It means the images are not uploaded by the tool. The browser still has access to files you select, and other scripts on the page could potentially access data if the page is compromised.
Can client-side tools handle very large images? Yes, with limits. Browsers have canvas dimension limits and available memory varies. Downsampling and worker-based processing help, but very large files may still be slow.
Is client-side processing always faster? No. It avoids network transfer, but it depends on the device. For a low-powered phone, a server with fast hardware may be faster.
Does PictKit use WebAssembly? Some processing paths use native browser codecs and optimized JavaScript. The key point is that all operations happen locally.