AI Background Removal in JavaScript
Use @imgly/background-removal in the browser to remove image backgrounds with ONNX models.
Published:
Tags: background removal JavaScript, @imgly background-removal, ONNX image segmentation browser
AI Background Removal in JavaScript Part of our complete guide to this topic — see the full series. The package brings production-quality image segmentation to the browser. It runs an ONNX neural network entirely on the client — no server, no API key, no upload. --- What is How It Works? The library uses ONNX Runtime Web to execute a pre-trained image segmentation model in the browser. ONNX (Open Neural Network Exchange) is an open standard for machine learning models, enabling portability across frameworks and runtimes. Preprocessing — the input image is resized to the model's expected input dimensions (typically 1024×1024) and normalized Inference — the ONNX model runs in WebAssembly (or WebGL for GPU acceleration) and outputs a probability mask Postprocessing — the mask is refined and…
Frequently Asked Questions
How do I remove backgrounds with JavaScript?
Use the @imgly/background-removal package. Call removeBackground(imageInput) with a File, Blob, or URL. It runs an ONNX segmentation model in the browser via WebAssembly and returns a transparent PNG blob. No server required.
What is @imgly/background-removal?
@imgly/background-removal is an open-source npm package from IMG.LY that runs an ONNX image segmentation model in the browser. It uses ONNX Runtime Web under the hood and is based on the BRIA RMBG-1.4 or similar architecture. The library handles model loading, preprocessing, inference, and mask compositing.
How does ONNX model work in the browser?
ONNX (Open Neural Network Exchange) models are compiled neural networks that run on the ONNX Runtime. The browser version uses WebAssembly (and optionally WebGL for GPU acceleration) to execute the model without a server. The runtime loads a .ort or .onnx file, executes the graph, and returns the output tensor.
How do I handle large images in background removal?
Large images (above ~2000px on any side) slow inference significantly. Resize the image before processing: use Canvas to draw the image at 1024×1024 or similar, run removal, then scale the resulting mask back up to the original dimensions. The model operates on the resized input; mask upscaling preserves detail.
What is the accuracy of browser-based background removal?
Accuracy is comparable to cloud APIs for well-lit subjects on distinct backgrounds. Portraits and product photos on uniform backgrounds achieve near-perfect results. Hair, fur, and transparent objects are the harder edge cases where results may need manual refinement.
All articles · theproductguy.in