Background removal in the browser 2026 — chroma keying, MediaPipe, AI models

Three ways, one goal

Background removal is no longer a specialist-software domain in 2026. Three fundamentally different approaches run browser-local today — all without the image leaving the computer. The three: classic chroma keying for controlled greenscreen setups, MediaPipe Selfie Segmentation for webcam streams and small images, and ONNX/WebGPU-based ML models (RemBG, BiRefNet, BRIA RMBG) for arbitrary photo content.

A short overview of the underlying technique is in the glossary entry on chroma keying; this post goes into practical depth.

1. Chroma keying — the classic

The original technique: pixels of a defined color (typically greenscreen green or bluescreen blue) are made transparent. The algorithm is simple enough for a canvas loop: compare every pixel in RGB or HSV space with the target color, set alpha to 0 on a match. Production code adds spill suppression (removing green halos around hair) and edge refinement.

Performance: for a 1920×1080 photo on a mid-range CPU, about 50–80 ms in JavaScript, 5–10 ms via a WebGPU compute shader. Accuracy: excellent with clean greenscreen setups, catastrophic with mixed backgrounds. When: live TV, stream overlay (OBS), studio product photos, anything with a controlled lighting situation.

When not: everyday smartphone photos. Without a greenscreen the technique is practically useless — what made background removal so popular in the smartphone era is only the ML wave of the late 2010s.

2. MediaPipe Selfie Segmentation

Google released MediaPipe Selfie Segmentation in 2020 as an open-source model for the browser, Android, and iOS. A lightweight TensorFlow Lite model (~3 MB) classifies pixel by pixel "person" vs. "background". It originally came from Google Meet background blur and was later released.

Performance: in Chrome on an M2 CPU about 15 ms per frame, > 30 FPS at a 1280×720 stream. WebGPU acceleration in Chrome 121+ makes it faster still. Accuracy: very good for selfie composition (person centered, well lit, webcam distance). Fails on complex poses, group photos, people in profile. When: webcam effects (Google Meet, Zoom), stream overlays, selfie stickers, simple portrait background swaps.

MediaPipe is the right choice when you need latency (real-time video) and cover a smartphone-selfie scenario. For static photos with arbitrary subjects, the next models are better.

3. RemBG, BiRefNet, BRIA RMBG — the AI models

Three specialized ML models dominate photo background removal in 2026. All three are based on U-Net-like architectures with attention mechanisms and are markedly more precise than MediaPipe, but need more memory and CPU/GPU.

• RemBG (u2net): the open-source classic. Model ~170 MB, runs as ONNX in onnxruntime-web. Usable quality for most photos.
• BiRefNet: a 2024 model from academic research. Markedly more precise on hair, fur, and fine structures. Model ~200 MB.
• BRIA RMBG 2.0: a commercially trained model with a license for non-commercial use (as of 2026). Best general quality, but licensing effort for production use.

Performance: on an M2 CPU all three need 2–5 seconds for a 1024×1024 image, with WebGPU 0.5–1 second, with a dedicated GPU 0.2–0.5 seconds. So not suitable for real-time video, but perfect for "click-and-wait" workflows in web apps. Accuracy: on typical smartphone selfies and product photos comparable to Adobe Photoshop's "Subject Select" feature, often even better on hair and transparent fabrics.

Browser deployment stack 2026

In practice, a modern browser background-removal pipeline looks like this:

1. Accept the image locally via <input type="file"> or drag-and-drop. The image stays in the browser.
2. Load the model via onnxruntime-web (or transformers.js for Hugging Face workflows). The model size makes the first run slow (~3–5 second cold start), later runs use the cache.
3. Enable WebGPU acceleration if available. A factor 5–10× faster than the WASM CPU path.
4. Inference in a Web Worker so the UI thread isn't blocked. Important for INP (see our CWV post).
5. Compose the result as an RGBA image in an OffscreenCanvas, then export as PNG or WebP.

Privacy: why local is decisive

Background removal is a classic use case where privacy is structurally important. The image shows a person — typically yourself or your family. A cloud API (remove.bg, Photoroom API) sees every upload, may store it, can use it to improve the model. Browser-local models eliminate this trust question structurally.

For sensitive image workflows without upload, I also rely on other local tools — the watermark generator, the EXIF editor, the Icon Studio all work browser-local.

When which technique?

• Real-time webcam with a fixed person centered: MediaPipe. 30 FPS, good accuracy.
• Studio product photo with a greenscreen: chroma keying. Faster and more precise than any ML model.
• Everyday smartphone selfie, static image: BiRefNet or BRIA RMBG.
• Product photos (marketplace, Etsy, e-commerce): RemBG or BiRefNet, then manual touch-up in an editor.
• Batch job > 100 images: server-side (Sharp + RemBG-CLI or a specialized service). The browser is too slow for batch.
• Complex content (hair, fur, transparent fabrics): BiRefNet often even beats Adobe Photoshop CC 2024 on hair.

The honest limitation

Even the best models in 2026 reliably fail on three scenarios: glass and strongly reflective surfaces (the model confuses reflections with foreground), very similar foreground and background colors (typically: a person in a dark sweater against a dark wall), and multi-person scenes where the model selects only one as foreground. Here you can't avoid manual corrections or dedicated subject-selection tools.

2026: WebGPU as a game changer

The most important performance change of the last 12 months is broad WebGPU availability (see glossary entry). Models that still needed 5 seconds in 2022 run in a second in 2026. That makes browser background removal usable for everyday work — previously it was more of a "have patience" workflow.

What comes next: SAM-2 (Segment Anything Model 2) from Meta is currently being ported to browser inference. Once the model runs stably, interactive background-removal tools with a click-and-refine UX are within reach — the biggest weakness of ML workflows so far.

Sources

MediaPipe — Image Segmenter · RemBG project · BiRefNet project · BRIA RMBG 2.0 on Hugging Face · ONNX Runtime Web · transformers.js · W3C WebGPU Spec · Wikipedia — Chroma key · Meta — Segment Anything Model 2.