Designing the Compressor: details that mattered
Notes from the design process — how we made a tool that feels fast and respectful of your files.
Building a good image compressor is hard. Building one that feels effortless, private, and respectful of your files is harder. Here are the design decisions that shaped the ToolBox Image compressor.
The upload experience
The first interaction a user has with the compressor is the upload zone. Most tools use a small, bordered box that says "Drop files here." We wanted something different — a full-width area that communicates possibility. You can click to browse, drag a single file, or drag an entire folder of 200 images. The upload area scales to fill the viewport and provides immediate visual feedback: a subtle glow, a scaling animation, and a file count badge.
The folder drag support was our hardest design trade-off. Supporting recursive folder scanning in the browser is technically challenging — the File System Access API is not available everywhere, and the fallback path requires manual enumeration. We invested in the fallback because the use case is clear: photographers and designers organise their work in folders. Asking them to flatten their directory structure before compressing would be a poor experience.
The comparison slider
When a user compresses an image, the single most important question is: did it lose quality? Numbers alone — "75% quality" — tell you nothing about visual fidelity. A side-by-side comparison slider lets users inspect the difference at pixel level.
The slider implementation was surprisingly delicate. The original and compressed images must be perfectly aligned, with synchronised pan and zoom. The slider handle must be large enough to find on mobile but unobtrusive on desktop. We settled on a 40px handle with a subtle drop shadow and a 2px divider line that stays visible regardless of image content.
Parallel progress
Batch processing with multiple workers creates a visualisation challenge: how do you show progress when eight images are compressing simultaneously? A single progress bar would jump unpredictably as fast workers finish and slow ones continue. Individual progress bars for each image would overwhelm the interface.
Our solution is a collapsed progress bar that shows overall completion percentage, total bytes saved, and a count of completed files. Users can expand it to see individual file status, including before-and-after sizes and quality metrics. The expanded view uses a compact, scrolled list that does not push the results below the fold.
Dark mode by default
We chose a dark interface for a practical reason: image compression is a visual task. A bright white background creates contrast that interferes with colour perception. Photos and graphics are easier to evaluate against a dark canvas. The dark theme also reduces eye strain during long batch processing sessions.
Settings, simplified
Image compression has a bewildering number of knobs: quality, format, chroma subsampling, colour space, metadata flags, progressive scan, optimisation passes. Exposing all of them would paralyse most users. We chose three presets — Auto, High Quality, and Lossless — that cover 95% of use cases. Advanced users can switch to Custom mode to access every parameter.
The Auto preset is the default and the one we recommend. It analyses each image individually and selects the format, quality, and optimisation level that produces the best balance of file size and quality. For most users, Auto is the only setting they will ever need.
What we learned
Designing the compressor taught us that users care deeply about three things: speed, privacy, and predictability. They want to know the tool will finish quickly, that their files are safe, and that the output will look good. Everything else — the specific format, the quality number, the compression method — is implementation detail. We built the interface around those three priorities, and early feedback suggests we made the right call.