白い端を残さず透明PNGを保存する方法

アルファチャンネルが実際に保存するもの

PNGのピクセルは、赤・緑・青・アルファの4つの数値を持ちます。アルファは不透明度で、0（見えない）から255（完全に不透明）までの値です。重要なのは、ピクセルがRGB値を保持するという点です アルファが低くても。ピクセルは真っ白で、かつ90%透明な場合があります。ほとんど見えませんが、暗いものの上に合成すると、そのかすかな白が見えるようになります。

白い端の問題は、すべて同じ現象の変形です。端のピクセルが部分的に透明で、その下に誤った色を持っていることです。

原因1：白と混ざったアンチエイリアスの端

デジタル画像のピクセルは正方形ですが、実物の端は曲線です。アンチエイリアスは、端に沿うピクセルを物体とその背後のものの混色にして、この差を埋めます。白いページ上の赤いロゴに40%覆われたピクセルは、赤40%と白60%を混ぜた薄いピンクとして保存されます。

次に背景を削除します。通常の削除ツールは背景色に近いピクセルを消し、残りを保持します。薄いピンクは削除されるほど純白に近くないため、完全に不透明な薄いピンクとして残ります。それが輪郭の各ピクセルで起こると、形全体に1ピクセルの明るい境界が付きます。

より優れた削除ツールは、賢い処理をします。保持か削除かの二択ではなく、そのピクセルをアルファ40%に設定して、元の赤を復元しようとします。ただし、混色から本来の色を復元するのは推測であり、白をどの程度取り除けるかが、端のきれいさを左右します。

原因2：形式によってアルファチャンネルが失われた

JPEGにはアルファチャンネルがありません。まったくありません。写真向けに設計された3チャンネルの形式で、透明度を保存する場所がファイル内にありません。透明画像をJPGで保存すると、エンコーダーがほぼ常に白の背景に統合し、透明度は永久に失われます。

ここで典型的な問題が起きます。きれいなPNGを書き出しても、後の工程で何かがJPGへ変換します。アップロードを縮小するCMS、添付を圧縮するチャットアプリ、プレビューを書き出すデザインツール、メールクライアントなどです。透明背景は白い矩形になり、白を再度除去すると、元よりはるかに乱れたJPEG圧縮済みの縁を切ることになります。

GIFの行に注目してください。1ビットの透明度では、各ピクセルは完全に見えるか完全に見えないかで、部分的な覆いはありません。そのためアンチエイリアスができず、すべての端がギザギザです。滑らかなPNGをGIFにすると、柔らかい縁取りと引き換えに階段ができます。

原因3：マット色のにじみ

一部の編集ソフトは、透明画像を「マット」色付きで保存します。アルファがゼロなら影響しないという考えから、完全に透明なピクセルのRGB値を指定色、通常は白に設定します。通常は影響しません。しかし、一部のレンダラーや大半の画像リサイズ処理は、隣接ピクセルを平均化します 含む RGB値を、アルファで重みづけするかどうかに関係なく平均します。単純なリサイズは不可視ピクセルの白を引き込み、見える縁へ広げます。

原寸では完璧な画像に、サムネイルへの縮小後に縁が現れる理由です。正しい方法はプリマルチプライドアルファで、RGBをあらかじめアルファで乗算して保存し、平均化を正しく動作させます。大半の現在のブラウザーやエンジンは正しく処理しますが、古い工程や一部の独自コードは対応しません。

推奨順の修正方法

1. 最初から問題を発生させない

元データを制御できるなら、これが圧倒的に最良の方法です。白に統合して書き出し、後から白を削除するのではなく、作成したツールから最初から透明背景で書き出してください。ベクターツール、3Dレンダラー、デザインアプリはすべてアルファ付きの書き出しに対応します。削除の各工程には、失敗する可能性があります。

AIモデルで画像を生成する場合、透明な背景を明示的に指定するか、被写体のどこにもない背景色を指定してください。鮮やかなマゼンタが昔からの選択です。自然界にその色はほとんどないため、分離が明確になります。

2. 対照的な色の上で背景を削除

白い縁があるのは背景が白だったからです。代わりにマゼンタや蛍光緑の上に被写体を置くと、残る縁もその色になります。見た目はより悪いかもしれませんが、被写体のどの色とも大きく異なるため、ツールが検出・補正するのははるかに簡単です。

当サイトの 背景削除 四隅のピクセルで背景色を特定し、一致するピクセルを消して透明PNGを書き出します。白地の商品写真、単色地のロゴ、ツール出力のグラフィックなど、平坦な単色背景には適します。複雑・グラデーション背景の写真用ではなく、その場合は被写体分離が適切です。

3. アルファ領域を1ピクセル縮める

縁取りがすでに焼き込まれている場合、最も単純で確実な修正は、見える範囲を少し縮め、汚れた縁を外側へ出すことです。エディターでアルファチャンネルを選択範囲として読み込み、1ピクセル縮め、反転して削除します。PhotoshopではLayer → Matting → Defringeがおおむねこれを自動で行い、GIMPにはLayer → Transparency → Threshold AlphaやScript-Fuのアンチエイリアス除去のオプションがあります。

実際のトレードオフがあります。本物の縁の細部を1ピクセル削るのです。2000ピクセルのロゴなら誰も気づきませんが、32ピクセルのアイコンでは幅の3パーセントであり、形が目に見えて細くなります。修正の強さを画像に合わせてください。

4. 端を削除せず、色を変える

小さな画像にはこちらが適しています。半透明の縁を削除するのではなく、アルファはそのまま保ち、RGBを本来の色である隣の内側のピクセルの色に置き換えます。端の柔らかさと形は保持され、混入した色だけが消えます。PhotoshopのDefringeを小さな半径で使うと近い処理ができ、コードでcanvasの画像データを扱うなら直接実装するのも簡単です。

5. 背景に使う色の上で合成する

そもそも透明度が不要、というのが率直な答えになる場合もあります。ロゴを既知の1種類の背景だけに表示するなら、その正確な色で背景を合成し、通常の画像として配布してください。アルファも縁のにじみも形式上のリスクもありません。これは回避策というより、透明度の複雑さに見合う価値があるのは背景が本当に変わる場合だけだと認識することです。

作業結果を確認

切り抜きの完成と判断する前に、この一覧を確認してください。1分ほどで、ほぼすべての問題を見つけられます。

1. 黒背景と白背景で確認します。 どんな縁取りでも、2つのうちどちらかの背景でははっきり見えます。エディターの市松模様プレビューは、中間の灰色が明るい縁も暗い縁も隠すため、見た目に惑わされます。
2. 100パーセントと縮小表示で確認します。 拡大縮小したときだけ現れる縁取りは、ファイル自体ではなく、リサイズ処理でマット色がにじんだことを示します。
3. ファイルが実際にPNGまたはWebPか確認してください。 CMSの表示だけでなく、拡張子と実際のデータを確認してください。次の名前のファイルは logo.png JPEG工程を経たものは、一般的で混乱しやすい失敗です。
4. 実際の使用先で確認してください。 ブラウザー、ゲームエンジン、印刷の処理では、それぞれ合成方法が異なります。意味のあるテストは、画像を実際に使う場所でのテストだけです。
5. 不要なキャンバス全体のレイヤーがないか確認してください。 不透明度1%のほぼ見えない背景レイヤーは、エディターでは見えなくても、書き出すと薄い色の膜が生じます。

よくある質問