AI Background Remover

How it works

lib/backgroundRemover.ts runs three stages. (1) preprocessImage normalizes the input: EXIF orientation is baked in via createImageBitmap({ imageOrientation: 'from-image' }), images larger than 4096 px on the longest side are downscaled, and the result is re-encoded as a lossless PNG so the model sees clean pixels. (2) It calls imgly removeBackground(file, { model, progress }); model choice maps small → isnet_quint8, medium → isnet_fp16 (default). Progress keys map to statuses: fetch:/models/* → "Downloading model..." (10–45%, capped at 90% when Refine edges is on), compute:decode → "Preparing image..." (50%), compute:inference → "Removing background..." (60%), compute:mask → "Applying mask..." (75%), compute:encode → "Encoding result..." (85–100%). (3) With "Refine edges" on, refineImageBlob post-processes the mask: completeOpaqueAlpha restores object regions the model left washed-out (a flat color far from the estimated background color with meaningful alpha is snapped to opaque — this is what fixes pale/patchy fills on logos), guidedFilterAlpha smooths the mask edge-aware (radius 4, eps 0.005, strip-processed for large images), applyAlphaContrast snaps residual haze below 0.35 alpha to fully transparent and everything above 0.65 to fully opaque, and defringeColors un-mixes color halos at the border using the nearby background color. Output is a PNG named {basename}-no-bg.png with dimensions read back from the object URL; originalSize/resultSize feed the size stats.

NETWORK: @imgly/background-removal fetches model assets from its default resource URL https://staticimgly.com/@imgly/background-removal-data/${PACKAGE_VERSION}/dist/ — first use downloads the selected pack (42 / 84 MB), after which the library's cache serves it (matching the UI hint). The patched package loads onnxruntime-web WASM from cdn.jsdelivr.net/npm/onnxruntime-web@1.30.0/dist/ with env.wasm.proxy enabled, so inference happens in a Web Worker instead of blocking the page. Redux backgroundRemoverSlice holds item, result, status, progress, isProcessing, model, refine.

How to use

1. Choose a model in the "AI Model" picker — Small (~42 MB) or Medium (~84 MB, default).
2. Leave "Refine edges" on for crisp masks, or switch it off to get the raw model output.
3. Drop one photo (accept image/*; single file).
4. Read the hint: "AI model downloads once (~84 MB) and is cached in your browser." — the size matches the selected model.
5. Click "Remove Background" (button shows a spinner icon + live status).
6. Watch "Downloading model..." then "Removing background..." and "Refining edges..." on the progress bar under the button.
7. Compare "Original" vs "Background Removed" — the checkerboard CSS background shows the transparency.
8. Check dimensions and result size under the output ("{w}×{h} · {size}").
9. Click "Download" (saves {basename}-no-bg.png) or "Start Over".

Tips

• First use needs network for staticimgly.com model data; later runs load from the browser cache ("cached after first use").
• Pick Small (~42 MB) for quick cuts, Medium (~84 MB, default) for everything else.
• Keep "Refine edges" on for graphics and product shots — it fills washed-out interior regions, snaps semi-transparent haze to clean transparency, and removes color fringes. Turn it off to compare against the raw model mask.
• Output is PNG with transparency — the checkerboard is CSS only, not baked into the pixels.
• Works best with clear subject separation; very low-contrast edges may leave halos — keep "Refine edges" on for best results.
• The file is renamed with a -no-bg suffix so originals stay distinguishable.

AI Background Remover FAQ

Credits

• @imgly/background-removal — In-browser segmentation; model assets fetched from staticimgly.com and cached
• onnxruntime-web — ONNX inference runtime; WASM assets loaded from jsDelivr CDN in a Web Worker