背景透過｜しきい値をヒストグラムで決めて透過PNGを作る
白背景やグリーンバックの画像を、色の近さで透明にして透過PNGにします。色の分布をヒストグラムで見ながらしきい値を決められ、フチに残る背景色も落とします。被写体の内側に開いた穴は件数と面積で知らせます。
JPEG・PNG・WebP に対応。1 辺 8,000px まで、全体で 1,600万画素まで、ファイルは 50MB まで。
背景を透明にしたい画像を選んでください
白い背景・グリーンバック・白地のロゴのように、背景がだいたい 1 色の画像に向いています
このツールについて
使い方・特徴・補足情報
背景透過とは
背景透過は、画像のなかで「指定した色に近い画素」を透明に変えるツールです。
白い撮影ボックスで撮った商品写真、グリーンバックの人物、白地のロゴが向いています。
どこまでを背景と見なすかは、色の距離のヒストグラムを見ながら決めます。しきい値を動かすと、透明になる画素の数がその場で変わります。
切り抜いたあとに白いフチが残るのは、境目の画素に背景の色が混ざっているためです。このツールは混ざった分を計算で引き、もとの色へ戻します。
被写体の内側に同じ色があると、そこにも穴が開きます。見落とさないよう、穴の数と面積を数えて知らせます。
保存はPNGだけです。JPEGは透明度の情報を持てないため、選べるようにしていません。
こんな人におすすめ
商品写真やロゴを扱う人
楽になること
単色の背景を透明にすること
避けたい手間
白いフチや穴が残ること
解決できる困りごと
- 許容値のつまみを当てずっぽうで往復させる時間が減る。いま何画素が透明になったかが数で出るため
- 切り抜いたロゴを暗い背景に置いたとき、白いフチが浮く失敗に気づかずに配ってしまうことがなくなる
- 商品の白いラベルまで透明になっていたのを、貼り付けてから気づいて撮り直す手戻りがなくなる
- 背景が1色ではない写真に無理に色指定を重ねて、時間だけかけてしまう前に見切りをつけられる
- 透明にしたつもりがJPEGで保存され、白く塗りつぶされていた、というやり直しを防げる
使い方
- 画像をドラッグするか、ファイルを選びます。例を入れるボタンでも試せます。
- 透明にする色を決めます。既定では画像の縁から自動で選びます。
- ヒストグラムを見ながら、しきい値とやわらかさのつまみを動かします。
- 「候補を当てる」を押すと、山と山のあいだの位置が入ります。
- 通知に穴の件数が出たら、必要に応じて穴を埋める設定を入れます。
- プレビューの下地を濃い色に切り替えて、フチに白が残っていないか見ます。
- 市松模様に戻して透明な部分を確かめ、PNGで保存します。
使用例
例の画像をそのまま透過する
「例を入れる」で読み込まれる240×180pxの画像です。候補を当てたときの数がそのまま出ます。
入力
画像: 240 × 180 px（43,200 画素）
透明にする色: #FFFFFF（画像の縁から自動）
しきい値: 0 / やわらかさ: 294（候補をそのまま採用）
出力
完全に透明: 28,168 画素（65.2%）
半透明: 532 画素（1.2%）
残った画素: 14,500 画素（33.6%）
ヒストグラムからの候補: しきい値 0・やわらかさ 294
（2 つの山を分ける点は 155／分離度 0.995）
通知: 被写体の内側に 1 か所（合計 1,460 画素）の穴が開いています
境目に残った背景色を落とす
半分だけ被写体が乗った画素の色です。にじみ取りを使うと、本来の色に戻ります。
入力
境目の画素（被写体の乗り具合 50%）
にじみ取り: 使わない
出力
rgb(143, 173, 208) ← 白がまだ混ざっている
にじみ取りを使うと rgb(30, 90, 161)
（この画像の被写体そのものの色は rgb(30, 90, 160)）
内側に開いた穴を埋める
被写体のなかに背景と同じ色があると、そこも透明になります。埋め戻したときの数です。
入力
被写体の内側の穴は透明にしない: 使う
出力
1,460 画素を埋めました
完全に透明: 26,708 画素
活用シーン
フリマアプリの商品写真を白抜きにする
白い布やボックスで撮った商品を切り抜きます。背景が均一なほど、しきい値の山がはっきり分かれます。
資料に貼るロゴの白い下地を消す
白背景のロゴ画像を透過PNGにします。色つきのスライドに置いても、四角い白地が浮きません。
グリーンバックで撮った人物を切り抜く
緑の背景をスポイトで指定します。髪の細かい部分は苦手なので、輪郭がはっきりした被写体に向きます。
スキャンした手書きイラストを線だけにする
白い紙の部分を透明にして、線画だけを残します。色鉛筆の薄い線が消えないかは、半透明の件数で確かめます。
サムネイル素材の切り抜きをそろえる
同じ照明で撮った複数のカットに、同じ色としきい値を当てます。設定はコピーして控えておけます。
切り抜き済み画像のフチを点検する
他のツールで切り抜いたPNGを読み込みます。残った背景色が何画素あるかを数で確かめられます。
技術的な解説
補足: 仕組み
画素はgetImageDataで読み、指定色とのRGBユークリッド距離を求めます。
距離は整数に切り捨てて442個の箱に入れます。件数はヒストグラムの累積から出すので、画像を数え直しません。
候補のしきい値は大津の手法で2つの山を分け、山の裾まで戻して決めます。
境目の色は観測色 = α × 前景色 + (1 − α) × 背景色で混ざります。αで解けば、もとの色に戻せます。
計算はWeb Workerに出すため、画面は止まりません。
もっと詳しく
やわらかさを広く取るほど白いフチが消える理由
やわらかさは「フチをぼかす量」ではありません。背景の色から被写体の色まで続く坂の幅です。
坂の外に出た画素は、透明度が100%のまま背景の色を含み続けます。にじみ取りはそこには効かないので、白いフチが残ります。
坂が背景から被写体まで届くと、境目の透明度が「どれだけ被写体が乗っているか」と一致します。
候補を当てると、やわらかさは2つの山のあいだをまたぐ値になります。フチが白いときは、まずここを広げてください。
アルファをぼかす処理との違い
背景透過ツールには「エッジぼかし」という設定を持つものがあります。透明度の地図にぼかしをかける処理です。
境目のギザギザは滑らかになりますが、フチの画素が持っている色はそのまま残ります。白背景から切り抜けば白っぽいフチ、緑背景なら緑のフチが残ったままです。
このツールのにじみ取りは色そのものを計算し直します。透明度は変えません。
目的が違うので、置き換えにはなりません。ギザギザが気になるときはやわらかさを少し広げてください。
色だけで分けられない画像の見分け方
髪の毛、毛皮、煙、ガラスは色の近さでは分けられません。1つの画素のなかで背景と被写体が細かく混ざっているためです。
背景がグラデーションや模様のときも同じで、距離の山が1つにつながります。分離度が低く出るのはこの状態です。
縁の一致率も手掛かりです。低いときは、画像の外周ですでに色がそろっていません。
どちらの数字も低いなら、このツールでは時間をかけても決まりません。被写体を認識して切り抜く別の方法に切り替えてください。
よくある質問
しきい値とやわらかさは、どちらを先に動かしますか？
まず「候補を当てる」を押して、両方に提案値を入れてください。そのうえで背景が残るならしきい値を上げ、フチが白いならやわらかさを広げます。
ヒストグラムの山の位置とつまみを見比べると、どちらの問題かが分かります。
被写体の一部まで透明になってしまいます。
被写体のなかに背景と近い色があります。通知に穴の件数が出ているはずなので、「被写体の内側の穴は透明にしない」を入れてください。
それでも消えるときは、被写体の縁に触れている部分です。しきい値を下げてください。
JPEGで保存できますか？
できません。JPEGは透明度の情報を持てず、保存すると透明だった場所が白や黒で塗りつぶされます。
透明を扱える形式はPNGのほかにもありますが、このツールはPNGだけを書き出します。
どのくらいの大きさの画像まで扱えますか？
1辺8,000pxまで、全体で1,600万画素まで、ファイルは50MBまでです。この3つは別々の条件です。
8,000×8,000pxの正方形は画素数のほうで上限を超えます。超えた画像は黙って縮めず、エラーで知らせます。
背景を透明にすれば、写真に写り込んだものは見えなくなりますか？
いいえ。消えるのは背景と判定された画素だけで、被写体の側に写っている文字や書類はそのまま残ります。
見せたくない部分を覆う目的なら、画像伏せ字・モザイクツールを使ってください。
「分離度」とは何の数字ですか？
色の分布が2つの山にどれだけ分かれているかを0〜1で表した値です。大津の手法で分けたときのクラス間分散を、全体の分散で割っています。
低いときは候補が目安にしかなりません。つまみを自分で動かしてください。
白いフチが残っているかは、どこで分かりますか？
プレビューの下地を「濃い色」に切り替えてください。市松や白の上では、白い残りが地に溶けて見えません。
数で見るなら「半透明」の件数と「フチの色を取り直した画素」を比べます。半透明が0のときは、にじみ取りが働く画素がありません。
同じ設定を別の画像にも使えますか？
結果のコピーに色としきい値が入るので、控えておけば同じ値を打ち直せます。
ただし候補は画像ごとに計算されるため、照明が違うカットでは山の位置がずれます。
関連記事
このツールの使い方や活用例をブログでも紹介しています。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。