PixelForge — 100% In-Browser Privacy-First Image Studio
A 100% client-side, privacy-first web application for high-performance image processing, AI background removal, target-size compression, and format conversion—all running entirely in-browser via WebAssembly, Web Workers, and HTML5 2D Canvas API.
🏛️Architecture & Core Philosophy
Unlike traditional image tools that upload your files to remote servers, PixelForge is 100% client-side. All heavy compute (decoding, encoding, AI segmentation) happens directly on the user's device using WebAssembly (WASM), Web Workers, and the HTML5 2D Canvas API.
🔒Zero Server Uploads
Images are read into browser memory via FileReader, ArrayBuffer, and Blob API streams. Zero bytes ever leave your client device or touch remote servers.
⚡Zero Server Infrastructure Costs
All heavy compute (decoding, encoding, AI segmentation) happens on the user's device using WebAssembly (WASM), Web Workers, and the HTML5 2D Canvas API—reducing backend operational cost to $0.
🛡️Data Security & Privacy (GDPR/HIPAA)
Compliant with strict privacy standards (GDPR/HIPAA compliant by design, because no data ever leaves the user's device).
🛠️Technologies Used
PixelForge pairs a modern client framework with high-performance WebAssembly image processing libraries.
⚡Core Stack
| Technology | Role |
|---|---|
| React 19 | Modern UI rendering with automatic batching & concurrency |
| TypeScript 5.8 | Type-safe code across image processing pipelines and routes |
| TanStack Start | Full-stack SSR & type-safe router framework built on TanStack Router |
| Vite 8 + Nitro | Fast bundler and serverless engine preconfigured for Cloudflare Pages |
| Tailwind CSS v4 | Next-generation utility-first CSS engine for glassmorphic dark/light UI |
| Radix UI Primitives | Accessible UI components (Dialogs, Sliders, Accordions, Select, Tabs) |
🔬In-Browser Processing Libraries
| Library | Purpose |
|---|---|
| @imgly/background-removal | In-browser AI background removal running ONNX neural network models via WASM |
| heic-to | Decodes Apple iPhone .heic / .heif images into browser-renderable Blobs |
| utif | Decodes raw uncompressed/compressed TIFF (.tif, .tiff) image byte streams |
| jspdf | Generates PDF documents from image canvases client-side |
| jszip | Bundles multiple processed images into a downloadable .zip archive |
🔬Key Technical Approaches & Algorithms
Specialized algorithms and browser memory protection mechanics built into PixelForge.
🎯A. Smart Target-Size Binary Search Compression
To compress an image to an exact user-requested target file size (e.g., 500 KB):
- The app initializes a 7-iteration binary search over the image quality parameter (0.30 to 0.95).
- In each step, it renders the canvas to Blob, measures
blob.size, and narrowslo/hiquality bounds until it hits the highest possible visual quality under the target file limit.
🤖B. AI Background Removal with WebP Re-Encoding
- Executes a segmentor model directly inside the browser using WebAssembly.
- Raw AI output is RGBA PNG (which can be huge in size). PixelForge dynamically re-encodes the output to lossy WebP with alpha channel transparency, reducing file sizes by up to 70% compared to standard PNG.
💾C. Custom 24-Bit Binary BMP Encoder
Since browsers lack native toBlob('image/bmp') encoding support:
- Built a custom binary encoder constructing a 54-byte
BITMAPFILEHEADERandBITMAPINFOHEADERusingArrayBufferandDataView. - Writes raw BGR byte rows with 4-byte row alignment padding directly into binary memory.
🛡️D. Memory Safety & Crash Prevention
- Canvas Safe Check (
assertCanvasSafe): Enforces a 24-Megapixel (24,000,000 pixels) safety cap to prevent browser tab Out-of-Memory (OOM) crashes on high-res camera photos. - Dynamic Code Splitting: Heavy modules (
heic-to,utif,jspdf,@imgly/background-removal) use dynamicawait import(...)so the initial bundle page load is under 300KB. - Memory Leak Protection: Auto-revokes blob object URLs (
URL.revokeObjectURL(url)) after processing.
⚡Deployment System
Build engine compilation and CDN global edge routing.
⚙️Build Engine
Nitro compiles the application into a single Cloudflare Pages Edge Worker bundle (dist/_worker.js + static assets in dist/assets).
🌐CDN Edge Routing
Static assets and WASM modules are cached across 330+ Cloudflare global data centers with near-zero latency.
🔗Project Links & Repository
- 🌐 Live Application: https://pixelforge.mudassirasghar.dev/
- 💻 GitHub Repository: https://github.com/Mudassirdbs/PixelForge
FROM CONCEPT TO CODE </>
LET'S TURN IDEAS INTO SOLUTIONS
I'm available for full-time roles & freelance projects.
I thrive on crafting dynamic web applications
and delivering seamless user experiences.