DEV Community

Siddhartha Mondal
Siddhartha Mondal

Posted on Originally published at pixelshrink-tools.netlify.app

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

#javascript #showdev #webdev #react

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:

  1. They want to show you an ad before the download.
  2. They want your email for their marketing list.
  3. 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:

  1. 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.

Top comments (0)