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.