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

#webdev #javascript #nextjs #showdev

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:

Privacy — your images are stored on someone's server
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

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