背景を消すのにサーバーは必要？Background-Removalが出した答え

はじめに

ECサイトの商品画像から背景を消したい、プロフィール写真を透過にしたい――そんなとき、多くの人はまずPhotoshopや外部APIを思い浮かべるのではないでしょうか。しかし外部APIを使うとなると、画像をサーバーに送信するコストやプライバシーの懸念、API利用料が付きまといます。

そこで紹介したいのが Background-Removal です。このライブラリはニューラルネットワークをブラウザやNode.js上で直接実行し、サーバーに一切画像を送ることなく背景除去を完結させます。追加コストなし、プライバシーの懸念なしという、まさに現代的な解決策です。

Background-Removalとは

Background-Removalは、IMG.LY社が開発しているオープンソースのJavaScript/TypeScriptライブラリです。ONNXモデルとWebAssemblyを利用し、ブラウザ環境またはNode.js環境で画像の背景をその場で除去できます。外部サーバーへ画像データを送信しないため、機密性の高い画像を扱うアプリケーションでも安心して利用できます。

主な特徴

ブラウザ完結の背景除去 - ONNXモデルとWASMをブラウザ上で実行するため、サーバー費用がかかりません
プライバシー保護 - 画像データが端末外に送信されないので、機密画像でも安心して処理できます
柔軟な設定 - 出力形式（PNG/JPEG/WebP）や実行デバイス（CPU/GPU）、モデルサイズを用途に応じて選べます
Node.js対応 - @imgly/background-removal-node を使えばサーバーサイドでの一括処理も可能です

インストール

@imgly/background-removal を利用するには、peer dependencyである onnxruntime-web も併せてインストールします。

npm install @imgly/background-removal onnxruntime-web@1.21.0-dev.20250206-d981b153d3

yarnを使う場合も同様です。

yarn add @imgly/background-removal onnxruntime-web@1.21.0-dev.20250206-d981b153d3

基本的な使い方

最もシンプルな使い方は、画像ソースを渡して Blob を受け取るだけです。

import imglyRemoveBackground from "@imgly/background-removal";

const image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string =
  "/images/sample-product.jpg";

imglyRemoveBackground(image_src).then((blob: Blob) => {
  // 結果はPNGとしてエンコードされたBlob
  const url = URL.createObjectURL(blob);
  const img = document.querySelector<HTMLImageElement>("#result");
  if (img) {
    img.src = url;
  }
});

初回実行時はWASMとONNXモデルのダウンロードが発生するため多少時間がかかりますが、以降はブラウザキャッシュが効くので高速に処理されます。

設定オプション

出力フォーマットや実行デバイスなどは Config オブジェクトで細かく調整できます。

import imglyRemoveBackground, { Config } from "@imgly/background-removal";

const config: Config = {
  device: "gpu", // 'cpu' | 'gpu'（WebGPUが利用可能ならgpuを推奨）
  model: "isnet_quint8", // 'isnet' | 'isnet_fp16' | 'isnet_quint8'
  output: {
    format: "image/webp",
    quality: 0.8,
    type: "foreground", // 'foreground' | 'background' | 'mask'
  },
};

imglyRemoveBackground(image_src, config).then((blob: Blob) => {
  const url = URL.createObjectURL(blob);
  console.log(url);
});

実践的なユースケース

ダウンロード進捗を表示する

モデルの初回ダウンロードには時間がかかることがあるため、進捗をUIに反映すると体験が向上します。

import imglyRemoveBackground, { Config } from "@imgly/background-removal";

const config: Config = {
  progress: (key, current, total) => {
    console.log(`Downloading ${key}: ${current} / ${total}`);
  },
};

imglyRemoveBackground(image_src, config).then((blob: Blob) => {
  const url = URL.createObjectURL(blob);
  console.log("背景除去が完了しました", url);
});

アセットを事前プリロードする

商品登録フォームを開いた時点でモデルを先読みしておけば、実際に背景除去ボタンを押したときの待ち時間をなくせます。

import { preload, Config } from "@imgly/background-removal";

const config: Config = {
  device: "gpu",
};

preload(config).then(() => {
  console.log("アセットのプリロードが完了しました");
});