I Built ImageSmith: A Free, Client-Side WebP Converter for Developers Who Refuse to Paywall

Convert entire folder trees to WebP without uploading, paywalling, or destroying your folder structure. Here's why I built it, how it works, and why it's staying free forever.

------

The Problem: Three Traps, Zero Solutions

Every online image converter falls into one of three traps:

1. Paywalling batch conversion — Convert 100 images? Time to pay. Convert 500? That'll be $29/month, please.
2. Destroying folder structure — Upload your beautifully nested src/assets/icons/header/ folder, get back a flat, unorganized dump of files with random hashed names.
3. Uploading to third-party servers — Your files leave your device, sit on someone else's server, and your privacy is gone. Hope you trust that random SaaS with your product assets.

As a developer building web projects, I hit this wall constantly. I'd have a src/assets/ folder with 500+ images across 15 nested directories, and I needed every single one converted to WebP without losing the structure. No SaaS tool offered this without a paywall or privacy compromise.

I tried the usual suspects. Most wanted me to pay monthly subscriptions. Others flattened my carefully organized folders into a single directory of chaos. And the "free" ones? They were just harvesting uploads.

So I built my own.

What I Built

ImageSmith is a free, no-auth, no-paywall web tool that solves all three problems:

• 100% client-side processing via libwebp WASM — your files never leave your device
• Preserves your exact folder structure in the output ZIP — same tree, same names, just .webp
• No server uploads, no account creation, no limits — drop and go

Here's the workflow: Drop a folder of 1,000 JPEGs and PNGs. Get back an identical ZIP with every image converted to WebP. Same structure. Same filenames. Just .webp at the end.

No signup. No credit card. No "you've reached your free limit."

Try it now: image-smith-nine.vercel.app

The Technical Approach

Stack Overview

• Next.js 16 App Router + TypeScript — modern React with server components and Turbopack by default
• Tailwind CSS v4 — utility-first styling
• libwebp WASM (from CDN, not bundled — reason: Cloudflare 1MB limit)
• JSZip — folder-structure-preserving ZIP output
• Neon + Drizzle — optional reviews (rate-limited via Upstash Redis)
• Deployed to Vercel + Cloudflare Workers (via @opennextjs/cloudflare)

Why WASM?

Here's something most people don't realize: Canvas's toBlob('image/webp') can't encode WebP on Firefox. At all. It just silently fails or falls back to PNG.

libwebp WASM works everywhere. It's the same encoder Google uses, compiled to WebAssembly and running directly in your browser. No server. No middleware. Just pure, fast, browser-native encoding.

The WebP codec is written in C and compiled to Wasm, giving us access to the full libwebp API with none of the browser compatibility headaches.

Why JSZip?

Preserving folder structure in a browser environment isn't trivial. On Chrome, Edge, and Safari, we can use file.webkitRelativePath — a read-only property of the File interface that gives you the file's path relative to the directory selected by the user.

JSZip lets us take that path data and reconstruct the exact same folder hierarchy in the output ZIP. For Firefox (which handles directory uploads differently), we have a fallback approach that still preserves structure.

The result? Your src/assets/images/blog/2024/hero.jpg becomes src/assets/images/blog/2024/hero.webp. Every time.

Why Client-Side Only?

Three reasons:

1. Privacy — Your files never leave your device. No uploads, no server logs, no data harvesting.
2. Speed — No network round-trips. Conversion happens instantly in your browser.
3. Cost — I don't pay for server bandwidth. You don't pay for a subscription. Everyone wins.

This is the "zero-server" approach — everything runs in the browser using JavaScript and WebAssembly processing.

The Deployment Trick

Here's a fun detail: the WASM file isn't bundled with the app. Why? Cloudflare Workers have a 1MB limit on bundled assets. So the libwebp WASM is loaded from CDN at runtime. The app itself is deployed to Vercel, with Cloudflare Workers handling the backend via the @opennextjs/cloudflare adapter.

This gives us the best of both worlds: Vercel's developer experience and Cloudflare's global edge network.

How to Use ImageSmith

1. Go to image-smith-nine.vercel.app
2. Drag a folder or select multiple files
3. Adjust quality if needed (default: 80 — sweet spot for size vs. quality)
4. Click "Download"
5. Get back a ZIP with identical structure, everything converted to WebP

That's it. No tutorials. No onboarding. No "please create an account."

What's Next?

V1 is complete and live. V2 ideas (not in scope yet):

• CLI tool — for scripted batch conversion in CI/CD pipelines
• Cloud bucket integration — direct S3, GCS, or R2 output
• Scheduled conversions — automated optimization for recurring asset updates

For now, it's a web tool. Free. Open-source. And staying that way.

Open Source

GitHub: mahtamun-hoque-fahim/imageSmith

Built in public. Feedback, PRs, and forks welcome.

If you've ever been frustrated by paywalled batch converters or lost folder structures, this one's for you. Try it. Break it. Tell me what you think.

— Mahtamun Hoque Fahim