Last week I needed to compress a passport photo and a couple of internal screenshots for an online form that had a strict 100KB file limit.
I googled for quick compressors, but almost all the top results felt shady:
- They upload your images to a remote server to process them.
- They limit you to 2-3 files unless you pay or sign up.
- Half the page is covered in ads.
Uploading sensitive IDs or internal tech screenshots to a random backend isn't something I'm comfortable with. So I spent some time building a lightweight, browser-only compressor: PicZip.
How it works
The goal was simple: zero server calls for image processing, fast performance, and an easy way to hit a target file size (like 100KB).
Here is the tech stack and approach:
- Next.js (Static Export): The site runs entirely as static HTML/JS assets.
- Web Workers: Image decoding and compression loops run inside a dedicated Web Worker so the main thread never stutters, even when processing 50 images in batch.
-
Canvas API & Bitmaps:
createImageBitmaphandles the local decoding, drawn onto offscreen canvases. -
Client-side Zipping: When compressing multiple images at once, I used
fflateto bundle the results into a single.zipfile right in memory.
The Tricky Part: Target File Size Search
Getting a file under a specific target (say, 100KB) with good quality isn't straightforward because lossy compression isn't strictly linear.
In PicZip, if a target size is set, the worker runs a binary search on the quality factor (and optionally scales down max-width if quality drops too low) to get as close to the target byte limit as possible without destroying visual clarity.
Try it out
It's completely free, open to use without signup, and no image data ever leaves your machine:
👉 piczip.app (or the Chinese version at piczip.app/zh)
If you have suggestions on tuning the quality/binary-search algorithm or handling edge-case image formats in the browser, I'd love to hear your thoughts in the comments!

Top comments (0)