「透過背景」は単純に聞こえます——被写体の背後の部分がただ……消えている。その裏では特定の技術的な機能があり、それを理解すると、定番の苛立ちから救われます。ロゴを切り抜き、保存すると、背景が無地の白いブロックとして戻ってくる、あの苛立ちです。透過が本当は何なのか、そしてすべての工程を通じてそれを保つ方法を紹介します。

透過が実際に何なのか:アルファチャンネル

透過背景PNG:アルファ透過の実践ガイド — visual 1
透過が実際に何なのか:アルファチャンネル

普通の画像はピクセルごとに3つの数字を保存します。赤、緑、青がどれだけあるか。透過画像は4つ目を保存します。アルファ、そのピクセルがどれだけ不透明かを記録するものです。アルファは完全に透明から完全に不透明まで、その間のあらゆるレベルを持ち、柔らかくぼかした縁を作ります。

その4つ目のチャンネルが、透過が今のように振る舞う理由です。

  • PNGはアルファに対応していて、だからロゴ、アイコン、ステッカー、切り抜きの定番形式です。
  • WebPもアルファに対応していて、たいていPNGより小さなファイルサイズで。
  • JPEGはアルファにまったく対応していません。 JPEGに4つ目のチャンネルはないので、物理的に透過を保存できません。

この最後の点が、「透過背景が消えた」の最もよくある原因です。

白背景の罠

透過背景PNG:アルファ透過の実践ガイド — visual 2
白背景の罠

みんながつまずく筋書きがこれです。商品写真から背景を消し、きれいな切り抜きを得て、それを書き出す——すると透過が無地の白になります。ほぼ必ず、原因は形式です。JPEGで保存したのです。

JPEGはアルファチャンネルを保持できないので、エンコーダーは透ける部分のピクセルに何かをしなければなりません。それらを背景色で埋め、既定は白です。透過は編集で失われたのではなく、それを表現できない形式を選んだ、書き出しの瞬間に破壊されたのです。

対処は習慣です。透過があるものは必ずPNGかWebPで保存し、決してJPEGにしない。 ツールがJPEG出力しか提供しないなら、毎回あなたの透過を潰します。

透過を作る:背景を消す

ほとんどの透過画像は、普通の写真として生を受けます。透ける背景を得るには、被写体のまわりのピクセルを消し、そのアルファをゼロに設定します。これを手できれいにやるのは骨が折れます。背景除去は、被写体を検出してそれ以外をすべて切ることで、自動でやってくれます。

出力はアルファを保つ形式——PNGかWebP——でなければなりません。IMG.DIYの背景除去は本物の透過PNGを生成し、あなたの端末で(一度きりのモデルダウンロードのあと)動くので、写真はアップロードされません。それは商品写真、署名、サーバーに送りたくない個人的な画像にとって重要です。

変換を通じて透過を保つ

少し重い透過PNGがあって、より小さなWebPがほしいとします。これは安全です——両形式ともアルファに対応しているので、透過は生き残ります。逆の罠はJPEG変換することで、それは透過を潰します。

変換するときの手早い目安:

  • PNG → WebP: 透過は保たれ、ファイルはたいてい小さく。良い一手。
  • PNG → JPEG: 透過は破壊され、無地の色に置き換わる。フラットな背景が本当にほしいときだけ。
  • WebP → PNG: 透過は保たれ、ファイルはたいてい大きく。互換性には結構。

アルファを理解する変換ツールは、透過画像を潰さずに縮められます。画像変換は、対応するどの形式でもアルファチャンネルを無傷に保ち、サイトの他のすべてと同じように、アップロードなしでブラウザ内で動きます。

きれいな透過のための手早いチェックリスト

  • 背景を消している? PNGかWebPで書き出し、決してJPEGにしない。
  • より小さな透過ファイルが必要? PNGからWebPに変換——アルファは保たれる。
  • 予期しない白い箱が見える? ほぼ確実にJPEGで保存した。PNGでやり直す。
  • 暗いサイトに透過画像を置く? を確認——白背景向けに混ぜられた柔らかいアルファの縁は、うっすらハローを見せることがある。重要なら、実際に使う色に対して切り直す。

透過はピクセルごとのその4つ目の数字にすぎません。どの形式がそれを保ち、どれが捨てるかを知れば、白背景の驚きは起こらなくなり——切り抜きは、どこに置いてもきれいなままです。