アルファチャンネルとは？画像の透過の仕組み

普通の画像の各ピクセルは、赤、緑、青がどれだけ含まれるかを表す3つの数値で記述されます。これでピクセルの色はわかりますが、透けて見えるかどうかはわかりません。アルファチャンネルは、まさにそれを表すピクセルごとの4つ目の数値です。完全な透明から完全な不透明まで、不透明度を保存します。

「背景が透明なPNG」と言うとき、それはアルファチャンネルを持ち、背景のピクセルのアルファが0になっている画像を指します。このガイドでは、この数値の仕組み、ソフトウェアが保存する2つの方法、輪郭がおかしくなる理由、そしてファイルの中身を実際に確かめる方法を説明します。

RGBA：ピクセルごとに4つのチャンネル

MDNはアルファチャンネルをシンプルに定義しています。色はチャンネル（赤、緑、青）でできており、「背景がある程度透けて見える」色を表すために4つ目のチャンネルを加える、というものです。4つすべてを持つ画像をRGBAと呼びます。

値はいくつかの書き方ができ、どれも同じ意味です。

PNGの仕様は正確にこう述べています。アルファ値0は完全な透明、そのビット深度の最大値は完全な不透明で、中間の値は「背景画像に対して合成できる」半透明のピクセルである、と。

大切なのはこの中間の値です。よい切り抜きは、単に「被写体は不透明、背景は透明」ではありません。輪郭に沿ったピクセル、特に髪、毛、布、ガラス、動きのブレの部分は半透明です。そのおかげで、被写体がはさみで切り抜いたようにではなく、新しい背景の上で自然に見えるのです。

透明なピクセルはどう描かれるか

アプリが画像を何かの上に配置するとき、各ピクセルを後ろにあるものと混ぜ合わせます。W3CのCompositing and Blendingの仕様が基本の式を示しています。

result = Cs x as + Cb x ab x (1 - as)

Cs, as = color and alpha of your image (the source)
Cb, ab = color and alpha of what is behind it (the backdrop)

後ろが不透明というよくあるケースでは、これは加重平均になります。アルファ0.3のピクセルは自分の色を30%出し、背景を70%透かします。

ストレートアルファとプリマルチプライドアルファ

半透明のピクセルの色を保存する方法は2つあり、これを取り違えると、暗いふちや明るいふちが出る典型的な原因になります。

ストレートアルファ（非関連アルファ、非乗算済みアルファとも呼ばれます）は、ピクセルが完全に不透明であるかのように色を保存し、不透明度は別に持ちます。半透明の純粋な赤のピクセルは、赤255、緑0、青0、アルファ128として保存されます。

プリマルチプライドアルファ（乗算済みアルファ、関連アルファとも呼ばれます）は、色をあらかじめアルファで掛けた値で保存します。同じピクセルは赤128、緑0、青0、アルファ128になります。PNGの仕様の言葉を借りれば、このような画像は「すでに黒い背景に対して合成されている」状態です。

ファイルがどちらを使うかは、形式とソフトウェアによります。

• PNGは常にストレートアルファを使います。仕様にはっきりそう書かれており、そのおかげで編集ソフトが画像の透過を簡単に変えられると記されています。
• グラフィックスのパイプライン、ゲームエンジン、動画の合成ツールは、内部でプリマルチプライドアルファを使うことがよくあります。合成の計算が簡単で、フィルター処理もうまくいくからです。

問題は、あるプログラムが乗算済みの値を書き出し、別のプログラムがそれをストレートとして読み込んだときに起こります。輪郭沿いの色が暗くなりすぎ、細い黒いふちが出ます。逆の場合は輪郭が明るくなりすぎます。あるツールで作った切り抜きすべてに同じ暗いふちが出るなら、まず乗算の食い違いを疑いましょう。

切り抜きにハロー（ふち）が出る理由

ハローとは、被写体の周りに見える、被写体に属さないふちのことです。よくある原因は4つあり、それぞれ直し方があります。

1. 元の背景が輪郭のピクセルに焼き付いている

カメラはきれいな境界を写すことはありません。緑の生け垣を背にした髪の毛は、一部が髪、一部が生け垣のピクセルになります。切り抜きがそのピクセルの元の色を残したまま半透明にするだけだと、緑が混ざったままになります。白の上に置くと、被写体がうっすら緑に光って見えます。

直し方はカラーの除去です。輪郭のピクセルごとに本来の前景色を推定し、その色で書き換えます。Photoshopでは「選択とマスク」ワークスペースの「不要なカラーの除去」がこれにあたり、オープンソースのrembgライブラリにも同じことをするdecontaminateオプションがあります。変わるのは輪郭の色だけで、マスクの形は変わりません。

2. マスクが硬すぎる

マスクに完全な不透明と完全な透明のピクセルしかないと、輪郭はギザギザに見え、元の写真のアンチエイリアスによって被写体の周りに1ピクセル幅の背景色の線が残ります。髪のような柔らかい被写体には、本当の中間値を持つ柔らかいマスクが必要です。

3. 透明なピクセルに隠れた色

ストレートアルファのファイルでは、アルファ0のピクセルにも赤、緑、青の値があります。目には見えませんが、画像をリサイズしたりぼかしたりすると隣り合うピクセルが混ざり、その隠れた色が白や黒だと、見える輪郭ににじみ出します。よい画像ライブラリは、リサイズの前に乗算し、あとで元に戻すことでこれを防いでいます。

4. 画像が色の上に統合されている

GIFやパレット形式のPNGは、オンかオフの透過にしか対応していないことが多いので、ツールは保存前にマット色、たいていは白に対して輪郭をアンチエイリアスします。その画像は白の上ではきれいに見えますが、それより暗い背景では白いふちが出ます。切り抜きを暗い背景に置くなら、完全なアルファで書き出しましょう。

マスク、マット、アルファ：用語の整理

これらの言葉は意味が重なり、ゆるく使われがちです。一般的な意味は次のとおりです。

• アルファチャンネル： 画像ファイルの中に保存された不透明度の値で、ピクセルごとに1つ。
• マスク： 別の画像のどの部分を見せるかを制御するグレースケール画像。Photoshopのレイヤーマスクでは、白が表示、黒が非表示で、グレーは一部が見えます。マスクは元のピクセルに触れずに編集できるため、プロは消しゴムで消すのではなくマスクで背景を削除します。
• マット： 映画や合成の分野で同じ考え方を指す言葉で、何を残すかを決めるグレースケール画像。「マッティング」は、髪のような難しい輪郭に対して、柔らかく正確なマットを計算する問題のことです。
• トライマップ： 3つの領域（確実に前景、確実に背景、不明）に大まかに分けた地図で、一部のマッティングのアルゴリズムが出発点として使います。
• 二値マスク、硬いマスク： 白と黒だけで、グレーがないもの。箱やロゴには十分ですが、髪には向きません。
• 切り抜き： 完成した結果で、被写体の色とアルファチャンネルを合わせたもの。

マスクとアルファチャンネルは同じ情報を持っています。多くのツールではどちらでも書き出せます。アルファが組み込まれた透過PNGか、編集ソフトや動画ツールで自分で適用できる白黒の別のマスク画像です。

アルファを保存できる形式

これらの形式の詳しい比較は、PNG、JPEG、WebPの違いをご覧ください。

画像に透過があるか確認する方法

ファイル名が.pngで終わっていても、透過している証拠にはなりません。完全に不透明なPNGはたくさんありますし、ネットで見つかる「透過」画像の中には、グレーと白の市松模様をピクセルに描き込んだJPEGもあります。確実に確かめる方法を紹介します。

目で見る

画像を暗い背景と明るい背景の上に、たとえばスライドやデザインツールで置いてみます。本当の切り抜きなら、どちらでも被写体の周りに背景の色が見えます。それでも市松模様が見えるなら、それは透過ではなく絵の一部です。

ImageMagickで

# Does the file have an alpha channel at all?
identify -format "%A\n" photo.png

# Is it fully opaque anyway? (true means no visible transparency)
identify -format "%[opaque]\n" photo.png

%Aは透過チャンネルを報告し（表示される言葉はImageMagick 6と7で異なります）、%[opaque]はすべてのピクセルが完全に不透明かどうかを計算します。アルファチャンネルがあり、結果がfalseであれば目的どおりです。

PythonとPillowで

from PIL import Image

im = Image.open("photo.png")
print(im.mode)                    # RGBA or LA means an alpha channel
print(im.has_transparency_data)   # True if the file carries any transparency info

if "A" in im.getbands():
    lo, hi = im.getchannel("A").getextrema()
    print("alpha range:", lo, hi)  # lo == 255 means nothing is transparent

この最小値と最大値の確認で、すべてのピクセルが不透明なRGBAファイルというよくあるケースを見つけられます。

プラットフォームがアルファを無視する場合

透過を取り除いたり無視したりする場所もあります。Etsyは透過PNGに対応しておらず透明部分が黒く表示されることがあるとしており、AmazonやWalmartのようなマーケットプレイスはそもそもメイン画像に純白の背景を求めています。そうした場合は、結果を自分で管理できるよう、切り抜きを背景色の上に自分で統合しましょう。自社のWebサイト、スライド、デザインツールでは、アルファを残しておきます。

きれいなアルファチャンネルをすばやく作る

硬いマスクではなく柔らかい輪郭の切り抜きが必要なら、removebackground.devは完全なアルファチャンネルを持つ透過PNGやWebPのファイルを作成でき、APIではグレースケールのマスクだけを返すこともできます。