Building a Serverless Background Remover with WebAssembly & AI

Processing images in the browser has traditionally been limited to simple canvas manipulations. However, with the advent of WebAssembly (WASM) and ONNX Runtime Web, we can now run complex machine learning models directly on the client. Here is how we implemented our Background Remover tool.

The Stack

Our goal was to create a tool that required zero backend infrastructure for image processing. To achieve this, we utilized:

• WebAssembly (WASM): For near-native execution speed of heavy computational tasks.
• @imgly/background-removal: A powerful open-source library that packages ONNX models for browser use.
• SharedArrayBuffer: Enabling multi-threaded processing for faster inference.

Why @imgly/background-removal?

We chose the @imgly/background-removal library because of its seamless integration with the browser environment. It handles the complexity of loading the ONNX model (`u2net`) and managing WASM threads.

The library downloads the model chunks (approx 10-20MB) once and caches them. Subsequent runs are incredibly fast. Here is a snippet of our implementation logic:

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

async function processImage(imageSrc) {
  const blob = await removeBackground(imageSrc, {
    progress: (key, current, total) => {
      console.log(`Downloading ${key}: ${current}/${total}`);
    }
  });
  return URL.createObjectURL(blob);
}
            

Performance Challenges & Solutions

1. Initial Load Time

The first run requires downloading the AI model. To mitigate user friction, we implemented a progressive loading status bar that informs the user exactly what is happening (e.g., "Downloading AI Model...").

2. Thread Blocking

Running heavy inference on the main thread freezes the UI. WASM helps, but utilizing Web Workers is critical. The library handles this by spawning workers that utilize SharedArrayBuffer to pass image data without expensive copying.

The SEO Advantage

By shifting to client-side execution, we reduced our "Time to First Byte" (TTFB) significantly since we serve static assets. Search engines favor fast-loading sites. Additionally, the unique value proposition of "Privacy First" allows us to target niche keywords that server-based competitors cannot claim.

Conclusion

Client-side AI is not just a gimmick; it's a viable architecture for production-grade image tools. It reduces server costs to near zero while providing superior privacy for users. Check out the implementation in action on our Background Remover page.