All articles
9 min readBackground RemovalMattingTutorialWebGPU

Remove Image Backgrounds in Your Browser: How the Models Actually Work

Two segmentation models, a fixed 512×512 graph, and a licensing decision most tools never mention. How in-browser background removal works, which quality tier to pick, and how to get clean edges on hair, fur and glass.

Background removal looks like magic and is really a narrow, well-studied problem: for every pixel, decide how opaque it should be. That output is an alpha matte — a grayscale image where white means “keep” and black means “delete”. Get the matte right and the cutout follows automatically. Get it slightly wrong and you get the giveaway of cheap background removal: a grey halo, chewed hair, or a translucent drinking glass rendered as a solid blob.

Understanding what the model is actually doing — and, crucially, at what resolution — is the difference between fighting the tool and getting a usable cutout on the first try.

Two models, two jobs

The tool ships two quality tiers backed by two different segmentation networks, plus a third tier that is the second model on faster hardware.

TierModelDownloadBest at
FastMODNet~26 MBPortraits and people. Small, quick, runs on WebGPU. The right default for a profile picture.
BalancedBiRefNet Lite~183 MB (fp32)General subjects — products, objects, animals, anything that is not a face. Runs on CPU via WebAssembly for maximum compatibility.
High qualityBiRefNet Lite~183 MB (fp32)Same engine as Balanced, executed on WebGPU. Identical output, materially faster on a machine that has it.

Note what the third tier is not: it is not a bigger model. Balanced and High quality load the same weights and produce the same matte. The only difference is whether the matrix multiplications run on your GPU or your CPU. If you are on a laptop without WebGPU, choosing High quality buys you nothing except a fallback.

The licensing decision nobody mentions

If you have shopped for background removal models, you have seen BRIA’s RMBG-1.4 and RMBG-2.0 recommended everywhere. They are excellent. They are also released under CC-BY-NC — non-commercial. A commercial product that quietly ships them is carrying a licensing risk it probably has not priced in.

This tool deliberately does not use them. MODNet and the MIT-licensed BiRefNet Lite re-export are both safe to ship in a product that anyone can use for anything, including commercially. It is a less glamorous choice and it is the correct one: the person removing backgrounds from product photos for an online store should not be relying on a non-commercial research licence.

Why 512×512 decides everything

Here is the fact that explains most of the behaviour people find confusing: both models take a fixed 512×512 input. Not a maximum — a fixed graph. A 12-megapixel photograph from a phone is downsampled to roughly a quarter of a megapixel before the network sees it, a reduction of about 45× in pixel count.

Two consequences follow directly:

  • Very large inputs do not produce better mattes. Feeding a 6000 px original costs memory and time and gives the model exactly the same 512×512 view. Source images are capped for exactly this reason.
  • Fine detail is limited by that grid. Individual strands of hair, the gap between a bicycle’s spokes, the mesh of a fabric — once they are smaller than a few pixels at 512×512, the model is guessing. It usually guesses plausibly, which is why the result looks fine at thumbnail size and soft at 100% zoom.

The matte is then scaled back up to the original resolution, which is why you should judge a cutout at the size it will actually be used. A profile picture destined for a 160 px avatar is an easy win. A hero image filling a 4K display is the hardest case a browser matting model will ever face.

From logits to alpha

The BiRefNet export does not hand back a finished alpha channel — it outputs pre-activation logits. The pipeline applies a sigmoid to squash them into 0–1 and then quantises to 8-bit alpha. That matters because it is where soft edges come from: a pixel the model is 60% sure about becomes 60% opaque, which composites beautifully against a new background and looks like a faint halo against a hard one.

If you see a halo, the fix is rarely “run a better model”. It is usually one of: composite against a background closer in tone to the original, nudge the edge treatment, or accept a slightly harder edge for that particular subject.

WebGPU vs WebAssembly: what actually changes

The tier ladder is a capability ladder. The tool asks for a WebGPU session where the model graph fits in the GPU’s storage buffer budget, and falls back to WebAssembly automatically when it does not or when the browser does not offer it.

One subtlety worth knowing: on the WebAssembly path there is no fp16 execution backend, so weights stay fp32. Trying to use 16-bit floats only on WebGPU would mean maintaining two numerical paths and two sets of possible output differences — not worth it for a matting model where output stability matters more than shaving a few milliseconds.

Practically: Chrome and Edge on a machine with a discrete GPU get the fast path. Firefox, Safari, and older hardware get the compatible path. Same matte, longer wait. If a single image feels slow and you are curious, the fastest diagnostic is to run the same image in two browsers and compare.

Finishing the cutout

Removing the background is the first half. The second half is making the result usable, and that is where most of the practical value sits:

  • Background. Transparent for design work; solid white for marketplaces that require it; a colour or tone for social posts.
  • Aspect ratio. 1:1 for marketplace grids, 9:16 for stories, 16:9 for thumbnails. Better to set it here than to crop later and lose the composition you liked.
  • Shadow. A contact shadow is what stops a cutout looking like a sticker. A soft drop shadow reads as “photographed on a surface”; a hard one reads as “pasted”.
  • Crop to subject. Trimming the transparent margin so the product fills the frame — the difference between a listing that looks amateur and one that looks consistent across a catalogue.
  • Format. PNG or WebP with alpha for design work; JPEG on a solid background when you need the smallest file that still looks right.

Batch: the case local processing wins outright

Cloud background removers meter by image and queue your jobs. Local processing has neither constraint, which changes what is reasonable to ask for. Dropping in two hundred product photos and exporting them as a single ZIP is not an abuse of the tool; it is the intended use.

The engineering detail that makes it possible: the batch queue keeps only a small thumbnail per image in memory rather than hundreds of full-resolution canvases. Your laptop fans spinning up is the entire server cost.

Recipes

Profile picture

Fast tier (MODNet, 26 MB) is purpose-built for people. Transparent or soft-colour background, 1:1, no shadow or a very soft one. Judge at 200 px, not at full zoom.

Marketplace product photos

Balanced or High quality — products are not portraits. White background, 1:1, crop to subject, faint contact shadow. If your marketplace demands a pure white background, crop-to-subject plus a flat white fill is exactly that pipeline.

Pets, fur, feathered or fringed subjects

Balanced tier, and set expectations: the model will resolve the mass of the fur well and individual hairs approximately. Shoot against a plain background if you can — the single biggest accuracy lever is not in the software.

Glass, smoke, nets, mesh

Genuinely hard. Semi-transparent subjects violate the assumption that a pixel is either subject or background. Sometimes the honest answer is to composite deliberately rather than expect a clean automatic matte.

Privacy, and the thing to check

Product photos of your own stock are not sensitive. Medical images, identity documents, photographs of clients, unreleased designs and anything covered by an NDA are. Uploading them to a background removal service creates a copy on someone else’s infrastructure — and image uploads frequently retain EXIF data, including GPS coordinates, until a server chooses to strip it.

Processing in the tab means none of that happens. You can verify it yourself in about thirty seconds: open DevTools, switch to the Network tab, and remove a background. After the one-time model download, no request containing your image should appear. That is the entire promise, and it is checkable.

Try it on the background remover — start with a portrait on Fast, then switch the same image to Balanced and look at the edge. That one comparison teaches you more about matting models than any benchmark table.

Try the tools

Everything described here runs for free in your browser — no sign-up, no uploads. Explore the full matrix of on-device AI tools from the homepage, or read the end-to-end workflows.

Back to the matrix