DEV Community: RaveTools

Building a Browser-Only Batch Image Compressor with WebAssembly

RaveTools — Thu, 27 Aug 2026 01:01:19 +0000

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.

I built a free, 100% client-side tool to view and remove file metadata

RaveTools — Fri, 17 Jul 2026 22:31:30 +0000

Every file you share carries hidden metadata, and most of it is more
revealing than people realize:

Photos store GPS coordinates - literally where the shot was taken.
AI images embed the full workflow: ComfyUI node graphs, Automatic1111 prompts, seeds, models. Post a PNG and you leak the whole recipe.
PDFs keep the author's real name, software and timestamps.
MP3s carry ID3 tags; JPEGs carry camera make, model and serial.

So I built Metadata Viewer & Remover - a free tool that does two things:

Views everything embedded in a file and interprets it (GPS on a map, "this PNG contains a ComfyUI workflow", C2PA Content Credentials, etc.).
Removes it with one click by raw-cutting the byte buffer (no re-encode, no quality loss) and hands back a clean file. Batch to ZIP supported.

The part I care about most: it's 100% client-side. No upload, no API, no
account needed. Your file never leaves the browser - which is exactly what
you'd want from a privacy tool.

🎥 30-second demo: YouTube Reel
🔗 Try it: https://rave-tools.com/tools/metadata-viewer

Built with Next.js, all parsing (EXIF / PNG chunks / ID3 / MP4 atoms / PDF)
written from scratch to keep it fully in-browser. Happy to answer anything
about how the parsers work.

15 free, in-browser dev & design tools. No sign-up required.

RaveTools — Thu, 16 Jul 2026 13:03:52 +0000

RaveTools is a collection of 15 free developer and design tools that run entirely in your browser, with no upload, no account, and no tracking. It includes an OKLCH color picker with Tailwind v4 palette export, a CSS gradient generator, an SVG-to-JSX converter, a designer QR code generator (SVG export, no redirects), a JSON formatter, a JWT decoder, cron and Unix-timestamp converters, and an OG/social image resizer.

There are lighter tools too: a hover-effect CSS snippet gallery, a PDF-to-scanned-look converter, a 3D packing calculator, and a couple of fun ones like a typing game and a "what to watch tonight" media randomizer.

Everything is 100% client-side, so your data never touches a server, and each tool is a clean, shareable URL.

Free forever. Try it at https://rave-tools.com