How I Built a Free Image Toolkit : freeimgkit (Next.js + WebAssembly)

I recently launched FreeImgKit — a collection of free online image tools that run entirely in the browser. No server processing, no account needed.

Here's what I built and the technical decisions behind it.

What it does

FreeImgKit has 6 tools:

• Image compressor (JPG, PNG, WebP)
• Image resizer with aspect ratio lock
• Photo cropper with preset ratios
• Format converter (PNG↔JPG↔WebP)
• Social media resizer (all platform presets)
• AI background remover

The core technical decision: client-side only

Most image tools upload your file to a server, process it, and send it back. This has two problems:

1. Privacy — your images are stored on someone's server
2. Speed — upload time adds latency

I decided everything would run in the browser instead.

How each tool works

Compression, resizing, cropping, converting

These all use the browser's built-in Canvas API:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = targetWidth;
canvas.height = targetHeight;
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
canvas.toBlob((blob) => {
  // blob is the processed image
}, 'image/webp', quality);

For compression I used the browser-image-compression npm package which handles the quality/size tradeoff automatically.

AI Background Removal via WebAssembly

This was the most interesting part. Background removal needs a real ML model — but I didn't want to send images to a server.

The solution: @imgly/background-removal — a package that runs a segmentation model via WebAssembly directly in the browser.

import { removeBackground } from '@imgly/background-removal';

const blob = await removeBackground(imageFile);
// blob is a transparent PNG — no server involved

The first run downloads the model (~50MB) to the browser cache. After that it's instant. The quality is comparable to paid tools like remove.bg for most subjects.

Tech stack

• Next.js 14 App Router + TypeScript
• Tailwind CSS for styling
• Canvas API for image processing
• @imgly/background-removal for AI bg removal
• browser-image-compression for compression
• Vercel for deployment
• Cloudflare for CDN

SEO architecture

Each tool is a separate page with its own URL: Each page has unique metadata, FAQ schema markup, and detailed SEO content explaining when and why to use that specific tool. This programmatic SEO approach means each conversion pair targets its own search query.

Results so far

Launched 5 weeks ago:

• 13 pages indexed by Google
• 845 impressions in first month
• Already ranking for "png to jpg", "crop photo online"
• 69 unique visitors in first 28 days

Still early but the organic growth curve is heading in the right direction.

What I'd do differently

1. Build the conversion pages first — they get more search traffic than the general tools
2. Add the FAQ schema from day one — Google detected it immediately and it boosts CTR
3. Submit sitemap earlier — I waited 3 weeks before submitting and lost indexing time

Try it

👉 freeimgkit.com

All tools are free, no account needed, and your images never leave your device.

Would love feedback from the dev community — especially on the WASM background removal performance on different devices.