Next.js + WebAssembly: Building a privacy-first image toolkit for free

A growing number of online tools promise quick image editing—compression, resizing, background removal—but many rely on uploading files to remote servers, raising privacy concerns and adding latency. One developer set out to change that by building FreeImgKit, a completely client-side image toolkit that runs entirely in the browser using Next.js and WebAssembly. No uploads, no accounts, and no waiting for server responses.

Since its launch five weeks ago, the project has gained traction, ranking for search terms like “png to jpg” and “crop photo online,” with over 800 impressions in its first month. Here’s how it was built, the technical choices behind it, and the lessons learned along the way.

Six tools, one browser-based experience

FreeImgKit offers six essential image utilities, all accessible from a single interface:

• Image compressor supporting JPG, PNG, and WebP formats
• Resizer with locked aspect ratios to maintain proportions
• Cropper with preset social media ratios (e.g., Instagram, Twitter)
• Format converter for seamless PNG ↔ JPG ↔ WebP transitions
• Social media presets tailored to platform requirements
• AI-powered background remover for transparent PNGs

Each tool operates directly in the browser, meaning uploaded images are processed locally and never transmitted to external servers. The result is faster performance and stronger privacy guarantees.

Processing images without a server: the browser does the work

Most image editing tools send files to a server for processing, which introduces two key drawbacks: potential privacy risks and added latency from upload and download times. To avoid these issues, FreeImgKit performs all operations client-side using the browser’s Canvas API and WebAssembly.

For standard tasks like compression, resizing, and format conversion, the project leverages the built-in Canvas rendering engine. Here’s a simplified example of how resizing works using the browser’s 2D context:

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) => {
  // Processed image is ready as a Blob
}, 'image/webp', quality);

For compression, the developer integrated the browser-image-compression npm package, which automatically balances quality and file size without manual tuning.

Removing backgrounds with WebAssembly: machine learning in the browser

The most technically demanding feature—AI background removal—required running a segmentation model locally. To achieve this without a server, the team turned to WebAssembly via the @imgly/background-removal package. This library loads a lightweight ML model that runs in the browser, delivering near-instant results after an initial ~50MB download to cache the model.

Here’s how background removal is implemented:

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

const blob = await removeBackground(imageFile);
// Output is a transparent PNG with the background removed

The first run downloads the model, but subsequent operations are immediate. For typical images, the quality matches popular paid services such as remove.bg, making it a viable free alternative for many use cases.

Under the hood: the tech stack powering FreeImgKit

The toolkit is built on a modern, performant foundation:

• Next.js 14 with the App Router and TypeScript for robust routing and type safety
• Tailwind CSS for responsive, utility-first styling
• Canvas API for all image manipulation and rendering
• @imgly/background-removal for client-side AI background removal via WebAssembly
• browser-image-compression for automated, high-quality image compression
• Vercel for fast, scalable deployment
• Cloudflare as a global CDN to ensure low-latency access worldwide

This stack ensures the application remains lightweight, fast, and accessible across devices.

SEO strategy: one page per tool, one query targeted

To maximize organic reach, each of the six tools has its own dedicated webpage with unique metadata, schema markup, and detailed content. This programmatic SEO approach aligns each page with specific user intent—such as “social media image resizer”—and improves discoverability for niche queries.

Early results reflect the effectiveness of this strategy:

• 13 pages indexed by Google within five weeks
• 845 impressions in the first month
• Ranking for competitive terms like “png to jpg” and “crop photo online”
• 69 unique visitors in the first 28 days

While still early, the growth trajectory suggests strong potential for continued organic expansion.

Lessons learned from launch day one

The developer shared key insights from the first weeks of production:

• Prioritize conversion-focused tools first – Pages for format conversion (e.g., PNG to JPG) tend to attract more search traffic than general-purpose utilities.
• Implement FAQ schema immediately – Google’s algorithm detected and rewarded schema markup early, boosting click-through rates.
• Submit the sitemap early – Delaying sitemap submission by three weeks resulted in lost indexing time, a critical misstep for a new project.

What’s next for FreeImgKit

With strong initial traction and a growing user base, the next phase includes expanding tool support, refining performance across devices, and continuing to optimize for search intent. The focus remains on delivering fast, private, and free image editing—without compromising on quality.

For developers and designers looking to edit images securely, the toolkit offers a compelling alternative to traditional server-dependent services. Try it out and share your experience—especially feedback on WebAssembly performance across different browsers and devices.