One-click background removal separates foreground from background and turns background pixels transparent.
Modern background removal tools use segmentation models. The model predicts how likely each pixel is to belong to the foreground, then creates an alpha mask for transparency.
Local Model Workflow
- The browser reads and decodes the image.
- The model predicts the foreground area locally.
- An alpha mask is generated.
- Background pixels are made transparent.
- The result is exported as a transparent PNG.
How /image/remove-bg Is Implemented Today
ToolGarden currently implements background removal as a browser-side single-image workflow: the React component handles file selection, model choice, progress, preview, and download, while the actual removal logic lives in removeImageBackground() inside lib/utils/image-browser.ts. The image file is not sent to an application server for processing.
| Step | Current implementation | Reason |
|---|---|---|
| Page entry | components/ImageBackgroundRemover.tsx uses the first file from the upload list, calls inspectImageFile() for dimensions and type, then enables the remove action. | This avoids pushing large batches through a browser model at once and keeps preview and download state clear. |
| Input guards | Supported inputs are JPG, PNG, WebP, GIF, BMP, SVG, and AVIF. Files are capped at 50MB, and decoded images are capped at 40MP. Empty files, unsupported formats, decode failures, and oversized images return structured errors. | The tool rejects inputs that are likely to freeze the tab or fail Canvas/model processing. |
| Pre-processing | removeImageBackground() loads the image through an object URL, reads naturalWidth / naturalHeight, draws it to Canvas, and uses normalizeLoadedImageToPng() to create a PNG Blob for the model. | A normalized PNG input reduces browser and codec differences before the model runs. |
| Model choice | The code dynamically imports @imgly/background-removal. The high-quality option maps to isnet_fp16, and the fast option maps to isnet_quint8. The UI describes them as medium about 80MB and small about 40MB. | The high-quality model gives steadier edges, while the fast model downloads and runs lighter on weaker devices. |
| Model assets | publicPath points to staticimgly.com/@imgly/background-removal-data/${PACKAGE_VERSION}/dist/. The first run downloads model assets, and later runs are usually served from the browser cache. | The image stays local, while the model is fetched as static assets. A slow first run and faster later runs are expected. |
| Progress and export | The library progress callback is mapped into model or compute stages. Output is fixed to image/png with quality 1, and the result returns the Blob, dimensions, source size, output size, and duration. The UI creates an object URL for preview and download. | PNG preserves the alpha channel needed for transparency, and the returned stats can be shown directly in the result panel. |
const modelMap = {
medium: 'isnet_fp16',
small: 'isnet_quint8',
} as const;
const modelInput = await normalizeLoadedImageToPng(image);
const blob = await removeBackground(modelInput, {
publicPath: BACKGROUND_REMOVAL_PUBLIC_PATH,
model: modelMap[options.model ?? 'medium'],
output: { format: 'image/png', quality: 1 },
progress: (label, current, total) => {
options.onProgress?.(createBackgroundRemovalProgress(label, current, total));
},
});So “local” means the user image is decoded, normalized, segmented, and exported inside the browser. The image Blob is not uploaded to a server, but the browser may still download open-source model assets from the model CDN on first use. If the device is offline and the model is not cached, background removal cannot start.
Which Images Work Best?
| Image type | Expected result | Tip |
|---|---|---|
| Portraits, products, pets, single subjects | Good | Clear subject edges help |
| Plain or simple background | Good | Foreground is easier to separate |
| Hair, transparent objects, complex shadows | Medium | Edges may need cleanup |
| Subject and background have similar colors | Harder | Use a higher-resolution source |