I Built ImageSmith: Free, Client-Side WebP, Now in Your Browser and Terminal

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:

• Paywalling batch conversion, Convert 100 images? Time to pay. Convert 500? That'll be $29/month, please.
• Destroying folder structure, Upload your beautifully nested src/assets/icons/header/ folder, get back a flat, unorganized dump of files with random hashed names.
• 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 an 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.

The Web App: Drop, Convert, Done

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 the web app now: image-smith-nine.vercel.app

The CLI: Built for Developer Workflows

The web app worked perfectly. But I kept hitting the same wall from a different angle, I'd have a project with 200 assets ready for deploy, and I'd have to leave my terminal, open a browser tab, drag files in, wait, download, and unzip.

It worked. But it felt wrong for a developer workflow.

So I built the CLI. Same ethos. Different surface.

Installation

bashCopynpm install -g @imagesmith/cli

Basic Usage

Convert a single file, a whole folder, or a ZIP archive, one command handles all three:

Convert a folder (preserves structure)

Copybash
imagesmith convert ./assets

Convert a single file

bashCopyimagesmith convert photo.png

Convert a ZIP archive

bashCopyimagesmith convert assets.zip

Advanced Flags

Adjust quality (default: 80)

bashCopyimagesmith convert ./assets --quality 90

Preview before writing anything

bashCopyimagesmith convert ./assets --dry-run

Powered by sharp, everything stays local, nothing leaves your machine. Perfect for CI/CD pipelines, pre-deploy hooks, or just staying in your terminal flow.

Why WASM? (The Technical Deep Dive)

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.

Preserving Folder Structure

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

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 or locally on your machine.
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 client-side.

Stack Overview

Web App:

• Next.js 16 App Router + TypeScript
• Tailwind CSS v4
• libwebp WASM (loaded from CDN to avoid Cloudflare's 1MB bundle limit)
• JSZip for folder-structure-preserving ZIP output
• Deployed to Vercel + Cloudflare Workers (via @opennextjs/cloudflare)

CLI:

• Node.js 20+ + TypeScript
• sharp for high-performance local image processing
• commander for CLI parsing
• Published on npm at 5.4 KB

What's Next? (V3 is Already Planned)

• V1 (Shipped): Web App, browser-based conversion
• V2 (Shipped): CLI, terminal-based conversion with --quality and --dry-run
• V3 (In Progress): MCP Server Mode, so AI agents (Claude Code, agentic workflows) can call ImageSmith as a tool mid-session. The stub is already in the repo.

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

Open Source & Community

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 the web app: image-smith-nine.vercel.app
• Try the CLI: npm install -g @imagesmith/cli

Break it. Tell me what you think. Let's make image optimization boring again.