I Built a Free Browser-Based Image Tool as a Side Project

PotatoDev — Fri, 06 Mar 2026 22:53:13 +0000

I Built a Free Browser-Based Image Tool as a Side Project — Here's What I Learned

I've been working a side project for the past few weeks after work. It's called ToolPad — a collection of free image tools that run entirely in your browser.

Background removal, image compression, resizing, cropping, and format conversion. Nothing fancy, but I wanted to build something real and actually ship it.

Why I Built It

I kept running into the same frustration. Whenever I needed to quickly compress an image or remove a background I'd end up on some site that either:

Uploaded my files to their servers
Slapped a watermark on the output
Asked me to sign up before doing anything
Felt slow and cluttered

I figured the browser is powerful enough to handle most of these operations locally. So I decided to build something that just works, with no friction.

The Tech Stack

Next.js 14 with App Router
Tailwind CSS for styling
Canvas API for resize, crop, and conversion
browser-image-compression library for compression
react-easy-crop for the visual crop editor
Cloudflare for background removal API

I chose Next.js specifically because SEO matters for a tool like this. Each tool needed its own URL and proper metadata so Google can index them individually. Plain React with Vite would have made that harder.

The Architecture Decision That Mattered Most

Everything runs client-side. No backend, no file uploads, no storage.

When a user compresses or resizes an image it never leaves their device. The Canvas API handles drawing, transforming, and exporting the result as a data URL which the user downloads directly.

This was a deliberate choice. Privacy is a real differentiator when most competitors upload your files silently.

What Was Surprisingly Hard

Background removal was the trickiest part. Getting clean edges around hair and complex subjects is genuinely difficult. I went through a few different approaches before settling on the current solution.

The crop tool was more work than I expected. react-easy-crop handles the visual interaction well but extracting the correct pixel area and redrawing it on a canvas with the right dimensions took a few iterations to get right.

Format conversion has a subtle gotcha — when converting PNG with transparency to JPG you need to fill the canvas with a white background first. Otherwise you get a black background on the output. Spent longer than I'd like to admit debugging that one.

What I'd Do Differently

I'd add automated tests earlier. Right now I'm doing manual testing before every deploy which works but doesn't scale. Playwright would be perfect for this kind of app — upload a file, click a button, verify the output changed. Something to add soon.

I'd also think about the target audience earlier. Halfway through building I realized there's a very specific use case this tool serves well — small photo printing shops that need to process passport photos quickly. That insight would have shaped some of the UX decisions earlier.

What's Next

Photo formatter — auto-layout 6 photos on an A4 sheet ready to print
Better mobile experience

Try It

If you work with images at all give it a try and let me know what's broken or missing. Brutal feedback welcome.

ToolPad

The whole thing is built and maintained by one person in spare time so manage expectations accordingly — but it works, it's fast, and your files stay on your device.

What image tools do you find yourself reaching for most often? Curious if there are obvious gaps I'm missing.

Forem: PotatoDev

I Built a Free Browser-Based Image Tool as a Side Project