I built a batch image compressor that runs inside the browser.
In my demo, I set a 400 kB target for each of four images totaling 79 MB. The final batch came out at 1.5 MB.
Features
- WebP, AVIF, MozJPEG, and lossless PNG output
- Before-and-after comparison with synchronized zoom and pan
- Quality-based compression
- Target file-size mode
- Per-image format and compression settings
- Batch selection and settings transfer
- Optional resizing and palette reduction
- ZIP export for multiple files
Running image codecs in the browser
The compressor uses codecs from @jsquash, compiled to WebAssembly.
A pool of Web Workers keeps encoding work away from the main UI thread. Each worker processes one file at a time, while the pool handles several batch items at once.
The browser loads each codec on demand. Selecting WebP does not load the AVIF or PNG encoder.
Before encoding, the processing pipeline:
- Decodes the source image
- Corrects EXIF orientation
- Applies optional resizing
- Handles transparency and background flattening
- Applies optional palette reduction
- Sends the prepared pixels to the selected encoder
The worker caches the prepared pixel data. Moving the quality slider can reuse the decoded and resized image instead of repeating the entire preprocessing pipeline.
Targeting a specific file size
Target mode accepts a limit such as 400 kB.
The worker encodes the image several times while searching across the available quality range. It keeps the closest result that stays below the selected budget.
The compressor does not reduce image dimensions to force a match. The user controls resolution through the separate Resize settings.
Cancelling WebAssembly work
Changing settings during a long AVIF encode created a worker-management problem.
The codec’s WebAssembly call runs synchronously inside its worker. A JavaScript cancellation flag cannot interrupt the encode halfway through. The worker reads that flag after the codec finishes, when the expensive work has already happened.
If an outdated job blocks a full worker pool, the compressor terminates and rebuilds that worker slot. Jobs running in the other slots continue processing.
Batch settings
Each image keeps its own format, quality, resize, and codec settings.
The compressor processes the active image while the user edits it. Selecting multiple files and pressing Apply current settings copies the active configuration across the selection.
Export finishes any remaining files before creating the ZIP archive.
Try it
You can use the Image Compressor for free:
Open the RaveTools Image Compressor
If you test it, let me know which codec option or browser-side image workflow you would add next.
Top comments (0)