PerfectSizeMe - Privacy-First Image Optimizer

Overview

Most online image compressors require users to upload their files to a remote server, which introduces latency and privacy concerns. PerfectSizeMe is a "Privacy-First" optimizer that runs entirely in the user's browser. By leveraging WebAssembly (WASM), the application brings native-grade image processing algorithms directly to the client side.

The tool allows users to drag and drop batches of images, select compression strategies, and instantly see the results. Because no data ever leaves the user's device, it is suitable for handling sensitive assets while offering near-instant feedback without network bottlenecks.

Core Features

WebAssembly & Local Processing

The core engine bypasses traditional server-side processing. Instead, it utilizes pre-compiled WASM binaries to perform compression algorithms directly in the browser's memory.

• Zero Latency: Eliminates upload/download times; large batches process as fast as the local CPU allows.
• Privacy Guarantee: Since no API calls are made with the file data, the application works offline and ensures data sovereignty.

Parallel Worker Architecture

To prevent the UI from freezing during heavy computation, I implemented a custom Worker Pool system.

• Dynamic Concurrency: The application detects the user's hardware thread count (e.g., 4 cores on desktop, 1 on mobile) and spawns an optimal number of dedicated Web Workers.
• Load Balancing: A queueing system distributes tasks efficiently across available workers, preventing memory crashes on lower-end devices.

Robust State Management

Handling high-frequency updates from multiple parallel workers required a sophisticated React state architecture.

• Atomic Updates: Used functional state updates to prevent race conditions when multiple images finish processing simultaneously.
• Granular Feedback: Implemented a "Heartbeat" sub-status system (e.g., Queued -> WASM Engine -> Rendering) to keep the UI responsive and provide users with precise progress tracking.
• Safety Shields: Built a "Race Pattern" timeout system that automatically skips files taking longer than 60 seconds, ensuring one corrupt file doesn't deadlock the entire batch.

Professional Inspection Tools

The application includes a detailed inspection suite for QA.

• Smart "Blink" Comparison: Beyond standard sliders, users can hold-to-compare (Blink Test), which is critical for spotting compression artifacts in downscaled images.
• Visual Glitch Prevention: Solved layout shifts during image toggling by pre-mounting views and managing visibility via CSS rather than DOM unmounting.

Technologies Used

• Frontend: Next.js 16 (App Router)
• Core Engine: WebAssembly (WASM), Web Workers (Comlink)
• Styling: Tailwind CSS, Lucide Icons
• Utilities: JSZip for batch downloads, Canvas API for dynamic backgrounds