# Remove Background

Remove image backgrounds to isolate subjects for compositing, product photography, or creating transparent overlays.

![Remove Background example showing an image with its background removed](/docs/cesdk/_astro/browser.hero.C0PR9trj_Z1d9iSk.webp)

10 mins

estimated time

Live Demo[

Download](https://github.com/imgly/cesdk-web-examples/archive/refs/heads/main.zip)[

StackBlitz](https://stackblitz.com/~/github.com/imgly/cesdk-web-examples/tree/main/guides-edit-image-remove-bg-browser)[

GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-edit-image-remove-bg-browser)

The `@imgly/plugin-background-removal-web` plugin adds AI-powered background removal directly to the CE.SDK editor. Processing runs locally in the browser using WebAssembly and WebGPU, ensuring privacy since images never leave the client.

```
import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';import packageJson from './package.json';
/** * CE.SDK Browser Guide: Remove Background with Plugin * * Demonstrates adding and configuring the background removal plugin * for the CE.SDK editor with various UI placement options. */class Example implements EditorPlugin {  name = packageJson.name;  version = packageJson.version;
  async initialize({ cesdk }: EditorPluginContext): Promise<void> {    if (!cesdk) {      throw new Error('CE.SDK instance is required for this plugin');    }
    const engine = cesdk.engine;
    await cesdk.addDefaultAssetSources();    await cesdk.addDemoAssetSources({      sceneMode: 'Design',      withUploadAssetSources: true,    });    await cesdk.createDesignScene();
    // Get page and set dimensions    const page = engine.block.findByType('page')[0];    const pageWidth = 800;    const pageHeight = 600;    engine.block.setWidth(page, pageWidth);    engine.block.setHeight(page, pageHeight);
    // Add the background removal plugin with canvas menu button    await cesdk.addPlugin(      BackgroundRemovalPlugin({        ui: {          locations: ['canvasMenu'],        },      })    );
    // Create a gradient background (deep teal to soft purple)    const gradientFill = engine.block.createFill('gradient/linear');    engine.block.setGradientColorStops(gradientFill, 'fill/gradient/colors', [      { stop: 0, color: { r: 0.08, g: 0.22, b: 0.35, a: 1 } }, // Deep teal      { stop: 1, color: { r: 0.35, g: 0.2, b: 0.45, a: 1 } }, // Soft purple    ]);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointX', 0);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/startPointY', 0);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointX', 1);    engine.block.setFloat(gradientFill, 'fill/gradient/linear/endPointY', 1);    engine.block.setFill(page, gradientFill);
    // Create centered title text    const titleBlock = engine.block.create('text');    engine.block.setString(titleBlock, 'text/text', 'Remove Background');    engine.block.setFloat(titleBlock, 'text/fontSize', 140);    engine.block.setEnum(titleBlock, 'text/horizontalAlignment', 'Center');    engine.block.setWidth(titleBlock, pageWidth);    engine.block.setHeightMode(titleBlock, 'Auto');    engine.block.appendChild(page, titleBlock);    engine.block.setTextColor(titleBlock, { r: 1, g: 1, b: 1, a: 1 });
    // Create image block with a portrait photo    const imageBlock = engine.block.create('graphic');    const rectShape = engine.block.createShape('rect');    engine.block.setShape(imageBlock, rectShape);
    const imageFill = engine.block.createFill('image');    engine.block.setString(      imageFill,      'fill/image/imageFileURI',      'https://img.ly/static/ubq_samples/sample_4.jpg'    );    engine.block.setFill(imageBlock, imageFill);    engine.block.setContentFillMode(imageBlock, 'Cover');
    const imageWidth = 202;    const imageHeight = 230;    engine.block.setWidth(imageBlock, imageWidth);    engine.block.setHeight(imageBlock, imageHeight);    engine.block.appendChild(page, imageBlock);
    // Create img.ly logo at bottom center    const logoBlock = engine.block.create('graphic');    const logoShape = engine.block.createShape('rect');    engine.block.setShape(logoBlock, logoShape);
    const logoFill = engine.block.createFill('image');    engine.block.setString(      logoFill,      'fill/image/imageFileURI',      'https://img.ly/static/ubq_samples/imgly_logo.jpg'    );    engine.block.setFill(logoBlock, logoFill);    engine.block.setContentFillMode(logoBlock, 'Contain');
    const logoWidth = 72;    const logoHeight = 45;    engine.block.setWidth(logoBlock, logoWidth);    engine.block.setHeight(logoBlock, logoHeight);    engine.block.setOpacity(logoBlock, 0.9);    engine.block.appendChild(page, logoBlock);
    // Position elements    const titleHeight = engine.block.getFrameHeight(titleBlock);    const imageGap = 30;    const padding = 20;
    // Calculate vertical layout - title and image centered    const totalContentHeight = titleHeight + imageGap + imageHeight;    const startY = (pageHeight - totalContentHeight) / 2;
    // Position title at top of content area    engine.block.setPositionX(titleBlock, 0);    engine.block.setPositionY(titleBlock, startY);
    // Position image centered below title    engine.block.setPositionX(imageBlock, (pageWidth - imageWidth) / 2);    engine.block.setPositionY(imageBlock, startY + titleHeight + imageGap);
    // Position logo at bottom center    engine.block.setPositionX(logoBlock, (pageWidth - logoWidth) / 2);    engine.block.setPositionY(logoBlock, pageHeight - logoHeight - padding);
    // Select the image to show the canvas menu with BG Removal button    engine.block.select(imageBlock);
    // Zoom to fit    await engine.scene.zoomToBlock(page, { padding: 40 });    engine.scene.enableZoomAutoFit(page, 'Both', 40, 40, 40, 40);  }}
export default Example;
```

This guide covers installing the plugin, configuring UI placement, and customizing the background removal process.

## Installing the Plugin[#](#installing-the-plugin)

Install the background removal plugin and its ONNX runtime peer dependency:

Terminal window

```
npm install @imgly/plugin-background-removal-web onnxruntime-web@1.21.0
```

Import the plugin in your application:

```
import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
```

## Initializing the Editor[#](#initializing-the-editor)

Set up the CE.SDK editor with asset sources before adding the plugin:

```
await cesdk.addDefaultAssetSources();await cesdk.addDemoAssetSources({  sceneMode: 'Design',  withUploadAssetSources: true,});await cesdk.createDesignScene();
```

## Adding the Plugin[#](#adding-the-plugin)

Add the plugin to the editor using `cesdk.addPlugin()`. The `ui.locations` option controls where the background removal button appears:

```
// Add the background removal plugin with canvas menu buttonawait cesdk.addPlugin(  BackgroundRemovalPlugin({    ui: {      locations: ['canvasMenu'],    },  }));
```

When a user selects an image and clicks the button, the plugin handles the entire workflow: exporting the image, processing it through the AI model, and applying the result back to the scene.

![A BG Removal button added to the Canvas Menu](/docs/cesdk/_astro/screenshot-bg-removal-button-v1.43.0.CwNZXOB3_Zlu7Pl.webp)

The plugin requires a correctly configured upload setting. ‘local’ works for testing but production requires stable storage. See the [Upload Images](sveltekit/import-media/from-local-source/user-upload-c6c7d9/) guide for details.

## UI Placement Options[#](#ui-placement-options)

The plugin supports multiple UI locations:

| Location | Description |
| --- | --- |
| `'canvasMenu'` | Context menu when selecting an image on canvas |
| `'dock'` | Panel in the left dock sidebar |
| `'inspectorBar'` | Top bar of the inspector panel |
| `'navigationBar'` | Main navigation bar |
| `'canvasBarTop'` | Top bar above the canvas |
| `'canvasBarBottom'` | Bottom bar below the canvas |

You can specify a single location or an array:

```
BackgroundRemovalPlugin({  ui: { locations: ['canvasMenu', 'dock'] }})
```

## Provider Configuration[#](#provider-configuration)

Configure the underlying background removal library through the `provider` option:

```
BackgroundRemovalPlugin({  ui: { locations: ['canvasMenu'] },  provider: {    type: '@imgly/background-removal',    configuration: {      model: 'medium', // 'small' | 'medium' | 'large'      output: {        format: 'image/png',        quality: 0.9      }    }  }})
```

| Option | Type | Description |
| --- | --- | --- |
| `model` | `'small'` | `'medium'` | `'large'` | Model size for quality/speed trade-off |
| `output.format` | string | Output format: `'image/png'`, `'image/webp'` |
| `output.quality` | number | Quality for lossy formats (0-1) |

The `'medium'` model provides the best balance of quality and speed. Use `'small'` for faster processing or `'large'` for maximum edge quality.

## Custom Provider[#](#custom-provider)

For advanced use cases, implement a custom background removal provider:

```
BackgroundRemovalPlugin({  provider: {    type: 'custom',    processImageFileURI: async (imageFileURI: string) => {      // Call your own background removal service      const response = await fetch('/api/remove-background', {        method: 'POST',        body: JSON.stringify({ imageUrl: imageFileURI })      });      const { processedUrl } = await response.json();      return processedUrl;    },    processSourceSet: async (sourceSet) => {      // Handle multi-resolution source sets      // Process the highest resolution and resize for others      return sourceSet;    }  }})
```

## Creating an Image Block[#](#creating-an-image-block)

Add an image to the scene for background removal:

```
// Create image block with a portrait photoconst imageBlock = engine.block.create('graphic');const rectShape = engine.block.createShape('rect');engine.block.setShape(imageBlock, rectShape);
const imageFill = engine.block.createFill('image');engine.block.setString(  imageFill,  'fill/image/imageFileURI',  'https://img.ly/static/ubq_samples/sample_4.jpg');engine.block.setFill(imageBlock, imageFill);engine.block.setContentFillMode(imageBlock, 'Cover');
const imageWidth = 202;const imageHeight = 230;engine.block.setWidth(imageBlock, imageWidth);engine.block.setHeight(imageBlock, imageHeight);engine.block.appendChild(page, imageBlock);
```

Select the image block to display the canvas menu with the background removal button.

## Performance Considerations[#](#performance-considerations)

The first background removal operation downloads AI models (~40MB) which are then cached:

*   **Model caching**: First run fetches models; subsequent runs use the cache
*   **GPU acceleration**: WebGPU provides faster processing than WebGL fallback
*   **CORS headers**: For optimal performance, configure these headers on your server:

```
Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corp
```

## Troubleshooting[#](#troubleshooting)

| Issue | Solution |
| --- | --- |
| Model download slow | First run fetches models; subsequent runs use cache |
| Poor edge quality | Use higher resolution input or ‘medium’/‘large’ model |
| Out of memory | Reduce image size before processing |
| WebGL errors | Check browser WebGL support; try different device setting |
| Plugin not showing | Verify plugin added and UI location configured |
| Result not transparent | Ensure export uses PNG format (JPEG doesn’t support transparency) |

## Next Steps[#](#next-steps)

*   [Export Overview](sveltekit/export-save-publish/export/overview-9ed3a8/) \- Export options for images with transparency
*   [Vectorize Images](sveltekit/edit-image/vectorize-2b4c7f/) \- Convert images to vector graphics
*   [Replace Colors](sveltekit/edit-image/replace-colors-6ede17/) \- Replace specific colors in images

---



[Source](https:/img.ly/docs/cesdk/sveltekit/edit-image/overview-5249ea)