I built a browser-only image toolkit with React and Canvas (no server needed)

Siddhartha Mondal — Fri, 23 Oct 2026 18:31:46 +0000

Most "free online image tools" upload your files to a server, keep them for some period, and often want an account. I wanted the opposite: every operation runs on your device, nothing is transmitted to a backend, and no account is required.

That's why I built PixelShrink — a browser-only image toolkit that runs entirely on the Canvas API.

What it does

Compress JPG, PNG, and WebP images
Resize, crop, and convert between formats
Compress to a target file size (100 KB, 200 KB)
Batch compress and download results as a ZIP
Combine images into a PDF
Inspect and strip EXIF metadata
Generate favicons, social-media presets, and passport sizes

17 tools in total, all client-side.

Why browser-only matters

Image compression isn't expensive. It's a CPU operation that any laptop can do in milliseconds. There's no technical reason to send a 3 MB photo to a server and back.

The reasons tools do it anyway are:

They want to show you an ad before the download.
They want your email for their marketing list.
They want to upsell you to a paid plan.

Browser-only tools remove all three. The image never leaves your device. No upload, no account, no tracking.

The technical stack

React + TypeScript for the UI
Vite for the build
Tailwind CSS for styling
Canvas API for all image processing
pdf-lib for the image-to-PDF tool
jszip for batch downloads
react-image-crop for the cropper
exifr for metadata reading

Everything is lazy-loaded per route, so the home page loads in under 100 KB.

The hardest part

Two things were genuinely tricky:

Format detection Browsers don't all support the same encoder set. Safari can encode WebP and AVIF, Firefox can encode WebP but AVIF support varies, and old browsers can't encode either. Rather than claim "AVIF supported!" and then silently fall back to PNG, the site runs a 2×2 test canvas through toBlob at runtime and only offers formats the browser can actually produce.

2. Touch-friendly cropping. Getting a crop box to feel right on a phone — drag to resize, drag inside to move, snap to aspect ratio — is harder than it looks with raw pointer events. I used react-image-crop rather than rolling my own, and it handles the touch edge cases correctly.

What I deliberately didn't do

No server-side processing. That would break the "no uploads" promise.
No AI upscaling. The upscaler uses plain canvas interpolation and says so on the page. Faking "AI enhancement" would be dishonest.
No HEIC support. Browsers can't decode HEIC without a large WASM bundle. I'd rather say "not supported" than ship a broken tool.
No analytics or ads (yet). If I ever add them, the privacy policy will be updated first.

Try it

https://pixelshrink-tools.netlify.app/

No account, no uploads, no tracking. Free.

I'd love feedback — especially on the touch experience and on any format the site doesn't handle that you wish it did.