Build your own free background remover that never uploads a photo

Cutting out product photos is a weekly job for a lot of designers. A client sends twenty phone photos of their products, and the shop needs them on a clean background, the right size, and light enough to load fast. Most people end up on remove.bg or Canva, paying for credits and uploading client photos to someone else's server.

You can build your own version instead. It takes one evening with an AI coding assistant, it's free to run, and nothing ever leaves your computer. This guide shows you the combo, then gives you two prompts: a simple one to get it working, and a second one to take it further.

The combo

A background remover. BiRefNet is an open source AI model that finds the subject of a photo and cuts it out, with clean edges even around hair and fur. It's one of the models behind rembg, the most popular open source background remover on GitHub. MODNet is a smaller, faster option for older laptops. Both run inside a web browser through transformers.js, a free library from Hugging Face.

An image compressor. Squoosh is Google's open source tool for making images smaller without them looking worse. Its compressors are packaged for web pages as jSquash, so your app can save images as WEBP or AVIF, the light formats websites load fastest.

Put them together and you get one simple app: drop in photos, and get back cut-out, resized, web-ready images.

What you're building

• One drop zone. Drag in one photo or fifty.
• Background options. Transparent, white, or your client's brand colour.
• Size options. Keep the original size, or pick 2000, 1200 or 1080 px square for shops and social media.
• One export button. Everything comes back as WEBP in a single ZIP file.
• Nothing uploaded. The AI runs in your browser on your own computer.

The right order

It's tempting to compress photos first to make everything faster. Don't. Compressing throws away the fine detail the background remover needs, so edges come out rough, and you'd end up compressing twice. The app works in this order instead:

1. Shrink the photo to the size you picked. This is what makes it fast.
2. Cut out the background on that clean, shrunk photo.
3. Add the new background: transparent, white or a colour.
4. Compress once, at the end, to WEBP or AVIF.

Before you start

• An AI coding assistant that can create files and run commands, such as Claude Code, Cursor or GitHub Copilot.
• Node.js, free from nodejs.org. Your assistant can check for it and tell you if it's missing.
• A modern browser. Chrome or Edge work best, because they let the app use your computer's graphics chip.

Step 1: Build the basic version

Make a new, empty folder, open it in your AI assistant, and paste this in:

Build me a simple web app called "Cutout" that removes the background from photos and saves them as web-ready images. Everything must run in the browser on my own computer. No photo may ever be uploaded to a server.

Use these open source tools only:
- transformers.js (@huggingface/transformers) with the "onnx-community/BiRefNet_lite-ONNX" model for background removal (MIT licence). Do not use any BRIA RMBG model, because its licence limits commercial use.
- jSquash (@jsquash/webp) to save WEBP files.

How it works:
1. One big drop zone, plus a "Choose photos" button. Accept JPG, PNG and WEBP.
2. Before removing the background, shrink each photo so its longest side is at most 2000 px. Never compress before removing the background.
3. Remove the background and show a before and after preview for each photo.
4. Let me pick the new background: transparent, white, or a colour I choose.
5. Save the result as WEBP at quality 82, compressed only once, at the end.
6. A "Download" button for each photo.

Show a clear message while the AI model downloads the first time, and explain that it's saved for next time. Keep the design clean and simple, with one main action on the screen. Use Vite and plain TypeScript, no frameworks I need to learn. When it's done, start it and tell me the address to open. I'm not a developer, so explain each step in one simple sentence.

The first time you open the app, it downloads the AI model, about 100 to 200 MB depending on the version. Your browser keeps it, so after that it starts straight away.

Step 2: Try it

Drop in a few photos with different backgrounds: a product on a desk, a person, something with hair or fur. Check the edges in the preview, then download one and open it in a design app on a dark background to see the cut-out properly.

If something looks wrong, tell your assistant what you see, in plain words: "the edges of the hair are blocky" or "it's very slow on my laptop". It knows the code it wrote and can fix it.

Step 3: Go further (optional)

When the basic version works, paste this in to make it a proper everyday tool:

Now upgrade Cutout with these features, keeping everything in the browser:

1. Automatic settings for my computer. When the app opens, check whether the browser can use the graphics chip (WebGPU), how much memory the device reports, and how many processor cores it has. Then run a two-second speed test on a small sample image. Pick one of three tiers and remember the choice:
   - Fast: graphics chip available and the test takes under a second. Use "onnx-community/BiRefNet_lite-ONNX" at full quality, allow exports up to 4000 px, process 3 photos at a time, and offer AVIF as well as WEBP.
   - Balanced: graphics chip available but slower. Use the same model in fp16, allow exports up to 2000 px, 2 photos at a time, WEBP only.
   - Light: no graphics chip or little memory. Use "Xenova/modnet" (Apache 2.0 licence), work at 768 px, allow exports up to 1200 px, one photo at a time, WEBP only.
   Show a small card such as "Your setup: Balanced. Photos up to 2000 px, about 2 seconds each" with a "Change" link to pick another tier, with a warning if it may be slow.
2. Batches. Process many photos in a queue with a progress bar, and an "Export all" button that saves everything in one ZIP file.
3. Size presets: Original, 2000 px, 1200 px, and 1080 px square (centred on the product, with even padding).
4. Brand colours. Let me save up to five background colours and reuse them.
5. Works offline. Make it an installable app (a PWA) that keeps working without internet once the model has downloaded.
6. Very large photos: shrink anything over 40 megapixels before processing so the browser doesn't run out of memory, and show a friendly message instead of crashing.

Test each feature with a few sample photos before telling me it's done.

Step 4: Share it (optional)

Because everything runs in the browser, the app is just a set of files. Ask your assistant to "deploy this as a static site on Vercel" or Netlify, and you get a link you can send to clients or your team. The site only sends them the app itself. Their photos still never leave their computer.

Good to know

• Hair, fur and glass are the hard parts. BiRefNet handles hair well, but see-through things like glasses or bottles can still need a touch-up in a photo editor.
• The light model is faster but rougher. If a laptop falls back to the Light tier, edges won't be as clean. That's the trade for speed.
• Check model licences, not just code. The code libraries here are MIT and Apache 2.0. The models are too: BiRefNet is MIT and MODNet is Apache 2.0. Some popular background removal models, like BRIA's RMBG, have licences that limit commercial use, which is why the prompt rules them out.
• Pair it with Filee. For converting other formats, like iPhone HEIC photos to JPG before you start, Filee does it with one drag, also without uploading anything.