画像の背景を透過にする方法 (商品写真・ポートレート)

背景透過が必要になる現場と、その素材の機密度

「画像から背景を抜く」というのは、EC サイトの商品ページで白背景に揃える、SNS のプロフィールアイコンを切り抜く、ビデオ会議のバーチャル背景用に人物だけ抜く、プレゼン資料に貼り付けるアイコン素材を作る、フリマアプリ出品の写真から自宅の家具を消す、といった用途で日常的に必要になります。Amazon や楽天の主要カテゴリでは出品ガイドラインで白背景が指定されており、撮影環境が整っていない個人セラーほど「とりあえず撮って、後で背景だけ抜く」フローに依存しています。

ここで扱う素材の機密度は意外と高くなります — 商品写真の背景には自宅のリビング、家具配置、郵便物、家族の姿、ペット、窓から見える外景が映り込みます。プロフィール用の自撮りには顔そのものが入ります。顔はパスワードと違って変更できない生体情報で、一度流通すると将来 deepfake や音声合成と組み合わさったときに撤回できません。子供の集合写真から自分の子だけを抜きたい、というケースは「未成年の生体情報」を扱っていることになります。背景透過は気軽な操作に見えて、入力データの性質は重い側に寄っています。

ブラウザ内で透過 PNG を出すまでの流れ

image-bg-remove を開き、JPEG / PNG / WebP をドラッグ & ドロップします。初回だけセグメンテーションモデルのダウンロードが走り (約 44 MB)、進捗バーで読み込み状況が表示されます。完了するとブラウザのキャッシュに保存され、2 回目以降はオフラインでも即座に動きます。複数枚を同時に投入でき、各画像で推論が終わると アルファチャンネル付きの透過 PNG がプレビューされます。個別ダウンロードと ZIP 一括ダウンロードのどちらも選べます。

切り抜き後に「白背景に置き直したい」「グラデーション背景に合成したい」場合は、出力の透過 PNG を image-background に渡すと、指定色や別画像との合成がブラウザ内で完結します。商品カタログのように複数の被写体を 1 枚にまとめたい場合は image-collage でグリッド合成すれば、切り抜き → 仕上げまでが同じ端末内で閉じます。境界に細かい粗が残った場合 (髪の毛・透明素材・白い被写体 × 白い背景の組み合わせなど) は、入力前に明るさ・コントラストを調整して被写体と背景の差を強めるか、後工程で画像編集ソフトのアルファチャンネルを微修正する流れが現実的です。

BRIA RMBG-1.4 を transformers.js + ONNX Runtime Web で動かす

このツールは BRIA RMBG-1.4 という汎用セグメンテーションモデルをブラウザに持ち込みます。U^2-Net 系の IS-Net (Image Segmentation Network) アーキテクチャをベースに、人物・物体・動物などを背景から分離するように訓練された約 44 MB のモデルです。Hugging Face の transformers.js でロードし、推論は ONNX Runtime Web が WebAssembly または WebGPU バックエンドで実行します。WebGPU 対応の Chrome / Edge では行列乗算が GPU シェーダで並列化され、CPU バックエンドより 1 桁速く動きます。

処理の流れはこうです — 入力画像を <canvas> に描画して 1024 × 1024 にリサイズ・正規化 → ONNX モデルに入力 → エンコーダ-デコーダ構造でピクセルごとの前景確率マップ (アルファマスク) を生成 → 元画像と同じ解像度にアップスケール → 元画像の RGB チャンネルにマスクを合成して RGBA の透過 PNG を出力。モデルの重み (約 44 MB) は初回だけ Hugging Face Hub の CDN からダウンロードされ、ブラウザの Cache Storage に保存されます。ダウンロード後は入力画像・推論結果のマスク・出力 PNG のいずれもブラウザのメモリ内にしか存在しません。推論は Web Worker で実行されるため、UI スレッドがブロックされず、複数枚処理中もページがフリーズしません。

「無料 AI 背景削除」サービスにアップロードするときに起きること

オンラインの背景削除サービスは「無料で低解像度、高解像度は有料」というモデルが主流です。その無料を成り立たせている収益源として、利用規約に「アップロードされた画像を品質改善・学習目的で利用できる」と明記されているケースは少なくありません。顔写真の場合、それは「あなたや家族の顔を、運営者の AI モデルの学習データとして提供している」ことを意味します。仮にその条項がなくても、画像が一度サーバーのディスクに書かれた時点で、エラーログ・CDN キャッシュ・バックアップに残った断片を後から完全削除することはできません。

ブラウザ内推論にはこの構造的非対称がありません。image-bg-remove はモデルウェイトの初回ダウンロード以外、画像バイトを外部に送るコードパスを持ちません。実装は GitHub で公開されており、BgRemoveTool.tsx と bg-remove-worker.ts を読めば fetch / XHR / WebSocket の送信先がモデル取得用 Hugging Face エンドポイントのみであることが追跡できます。DevTools の Network タブを「Preserve log」を有効にして開いた状態で、複数枚の背景除去 → ZIP ダウンロードを完走させてみてください。モデルキャッシュ済みの 2 回目以降は、画像処理関連のリクエストが 1 本も発生しません。「背景を消したいだけ」のはずの操作のために、顔と背景を運営者に渡してしまうねじれを構造から取り除けます。