アルファチャンネルとは？画像の透明度が実際にどう機能するのか、形式ごとに解説

「透明な」PNGを暗いスライドにドロップすると、白い長方形が一緒に付いてくる。エディターではファイルは問題なかった。では何が起こったのか？その答えは、ほとんど注目されない第4のチャンネルにあります。画像のすべてのピクセルは赤、緑、青の値を持ち、一部のフォーマットではアルファチャンネルと呼ばれる4番目の数値が、そのピクセルをどれだけ表示するかを示します。

このガイドでは、その数値が何を保存するのか、どのフォーマットがそれを保持するのか（PNGとWebP）、どれがそれをスイッチに減らすのか（GIF）、どれがそれを捨てるのか（JPG）、そしてなぜSVGが異なるルールで動作するのかを説明します。その過程で、7つの実際の切り抜きのアルファチャンネルをピクセル単位で読み取るので、以下の数値は理論ではなくファイルから得られたものです。

1つのPNG、4つの背景。スニーカーはAtlas Cloudの背景除去ツールで切り抜いたAI生成のテスト入力で、ファイルは各背景に変更なしで配置されました。

重要なポイント

• アルファチャンネルは、8ビット画像で0（完全に透明）から255（完全に不透明）までの各ピクセルの不透明度を保存する4番目のチャンネルです。
• PNGとWebPは完全なアルファチャンネルを保持します。GIFは1つのパレット色を透明としてフラグを立てることしかできません。JPGは透過性をまったく保存しません。
• Atlas Cloudの 無料AI背景除去ツール は、アップロードしたピクセルサイズの透過PNGを返し、ブラウザ内で処理されます。
• 測定した7つの切り抜きでは、部分的に透明なピクセルはわずか0.7%から2.2%でした。その薄い帯は、髪や輪郭を自然に見せるアンチエイリアスされたエッジです。
• ビューアで白または黒の背景が表示されるPNGは、通常、アルファチャンネルを失っていません。再エクスポートする前に、暗い背景またはチェッカーボード背景で確認してください。

アルファチャンネルが各ピクセル内に保存するもの

「アルファチャンネルとは何か」と尋ねると、通常は比喩が返ってきます。代わりに数値を示しましょう。W3CのPNG仕様では、一文で定義されています：「アルファサンプルはピクセルの不透明度を決定し、0は完全に透明、最大値は完全に不透明を意味します。」8ビット画像では最大値は255で、透明と不透明の間に256段階があります。

PNGは16ビットアルファも許可しています。仕様では、アルファを持つ両方の色タイプ（アルファ付きグレースケールとアルファ付きトゥルーカラー）で8または16のビット深度が許可されており、16ビットのアルファチャンネルは65,536段階あります。コンポジティングパイプライン以外では、通常は8ビットが使用されます。

したがって、RGBAピクセルは4つの数値です。3つは色を記述し、1つはカバレッジを記述します。4番目だけを変更すると、色はそのままでピクセルがフェードします。これが、柔らかい髪のエッジ、ドロップシャドウ、背景が透けて見えるガラスの背後にあるすべてのトリックです。

「透過」という言葉は重要な分割を隠しています。一部のフォーマットはピクセルごとに完全なアルファ値を保存するため、ピクセルは37%表示することができます。他のフォーマットは単一のイエスかノーかのフラグを保存します：このピクセルは描画され、あれはスキップされます。どちらも透過と呼ばれますが、エッジをフェードできるのは最初のものだけです。この違いを覚えておいてください。これがGIFステッカーがギザギザに見え、PNGの切り抜きがそう見えない理由です。

ビデオやゲームツールで出会うもう一つの用語：乗算アルファ。ストレート（または非乗算）ファイルでは、色の値は完全な強度で保存され、表示時にアルファによってスケーリングされます。乗算ファイルでは、色の値はすでにアルファで乗算されているため、半分表示される赤いピクセルは半分の強度の赤として保存されます。PNGはストレートタイプを使用します。仕様では、色の値は「アルファ値で乗算されていない」と述べられています。

このアイデアには論文の裏付けがあります。アルファの歴史に関するAlvy Ray Smithの1995年のメモは、1970年代にニューヨーク工科大学で自身とEd Catmullがこの概念を考案したとし、2つの慣習の線引きをしたとしてPorterとDuffの1984年の論文を挙げています。日常のWebや印刷作業では、違いを無視できます。エディターが処理します。

透明な背景でPNGを保存する方法

「エクスポートが透明でない」というトラブルの多くは、保存ダイアログが開く前に決まっています。3つのルールでカバーできます。背景レイヤーを非表示にするか削除する必要があり、エディターでキャンバスにチェッカーボードが表示されるようにします。フォーマットはアルファチャンネルを持つものである必要があり、実際にはPNGまたはWebPを意味します。

また、PNGオプションは、一部のエクスポーターがオン/オフの透過に減らすパレットバージョンではなく、しばしばPNG-24または32ビットとラベル付けされる8ビット/チャンネルの種類である必要があります。PNG仕様では、インデックス画像が「各パレットエントリにアルファサンプルを関連付けるアルファテーブル」を持つことを許可していますが、すべてのツールがそれを使用することを期待することはできません。

以下のメニューパスは、各ベンダーの独自のドキュメントからのものです。

どのツールを使用しても、ダウンロードする前にチェッカーボード上で結果を確認してください。Atlasの結果パネルにはまさにそれが表示されるので、ファイルがディスクに到達する前にアルファチャンネルが機能しているのを確認できます。

ワンクリックで任意の画像を透過PNGに変換

本物のアルファチャンネルを持つファイルを取得する最速の方法は、セグメンテーションモデルに作成させることです。Atlas Cloudは、ブラウザタブ内で背景除去ツールを実行します。これは、アカウントを必要としないサイト上の無料AIツールの小さなセットの1つです。写真をドラッグして、「無料で実行」をクリックし、結果をダウンロードします。

モデルはWebGPUを介してローカルで実行され、それがないマシンではWASMフォールバックがあります。私たちはネットワークを切断した状態で切り抜きを完了しました。ウォーターマークもサインアップもありません。

被写体はポートレートに限定されません。テストでは、集合写真、長毛の犬、白いスニーカー、手書きの署名、線画のロゴ、白い壁を背景に撮影された白いシャツが、それぞれ使用可能な切り抜きとして返ってきました。ロゴはネガティブスペースが開いた状態でした。必要な切り抜きが大判印刷用である場合は、私たちが実行した無料画像アップスケーラーの比較と組み合わせてください。アルファチャンネルは画像とともにスケーリングするためです。

実際の切り抜きの内部：ソフトピクセルはどこにあるか

私たちはそれらの出力のうち7つをPythonで開き、アルファ値ごとにすべてのピクセルをカウントしました。パターンは7つすべてで同じでした。被写体がフレームをどれだけ占めたかに応じて、60.6%から98.4%のピクセルが完全に透明でした。

部分的に透明なピクセル、つまりアルファが8から250の間のピクセルは、画像の0.7%から2.2%を占めていました。これは輪郭の周りを走る幅1〜3ピクセルの帯で、すべてのアンチエイリアス処理を行っています。

シースルーのベールは、定義だけではわからないことを教えてくれました。アルファチャンネルは半透明を保存できますが、ベールは0.73%の部分的に透明なピクセルしか返ってきませんでした。スニーカーと同じ薄い輪郭です。布地自体は不透明として記述され、背後の緑は色に焼き付けられていました。形状は保持され、半透明は失われました。ファイルにアルファチャンネルがあるからといって、モデルが範囲の中央を使用することを選択したかどうかはわかりません。

好奇心旺盛な人のための小さな技術的観察：7つのファイルすべてで、不透明な被写体ピクセルはアルファ255ではなく254にあり、ディスプレイでは表示できない違いです。私たちが検査したフルサイズのPNGでは、完全に透明なピクセルはすべて同じ色値、つまり純粋な黒を持っているので、ファイルはフリンジとして漏れ出す可能性のある隠された背景を保存していません。

どの画像フォーマットが透過をサポートしているか

5つのフォーマットが、あなたが渡されるほとんどすべてのファイルをカバーします。それらは透過を4つの異なる方法で保存し、その違いがエッジをフェードできるかどうか、ファイルがアニメーションできるかどうか、そして最終的にどれだけ大きくなるかを決定します。

JPGは透過をサポートしていますか？

いいえ。MDNの画像フォーマットガイドは明確に述べています：「JPEGはアルファチャンネルをサポートしていません。」このフォーマットは3つの色チャンネルのみを保存し、それ以外は何も保存しないため、レイヤー画像をJPGとして保存すると、エディターはまず色（通常は白）に平坦化する必要があります。その白は通常のピクセルとなり、ファイルがどこへ行っても被写体と一緒に移動します。

これが「透過JPG」のダウンロードが主張どおりでない理由でもあります。ファイルが実際に間違った拡張子のPNGであるか、表示されているチェッカーボードがピクセルに描かれているかのどちらかです。.jpgを.pngに名前変更しても、箱のラベルが変わるだけで中身は変わりません。透過が必要な場合は、JPGを開き、背景を削除し、結果をアルファチャンネルを保持できるフォーマットに保存する必要があります。

透過GIF：1色、ハードエッジ

GIFの透過はフォーマットの89a改訂に由来し、その古さが現れています。GIF89a仕様は、透過インデックスを持つグラフィックコントロール拡張を追加し、次のように説明しています：「透過インデックスは、遭遇したときに表示デバイスの対応するピクセルが変更されず、処理が次のピクセルに進むようなものです。」カラーテーブルの1つのエントリが透明であると宣言されます。他のすべてのピクセルは完全な強度で描画されます。

これにより、GIFの透過は1ビットの事項になります。ピクセルはスキップされるか描画されるかのどちらかで、最大256色のパレットでは、半分表示されるエッジの余地がありません。GIFの切り抜きを、作成時とは異なる背景に配置すると、輪郭が階段状になり、しばしばアンチエイリアスされたピクセルが不透明にスナップされた場所に淡いフリンジが現れます。

私たちはスニーカーの切り抜きを、通常のデフォルトである128のアルファしきい値でGIFに変換し、靴ひもの同じ領域を3倍に拡大しました。8ビット側は2、3ピクセルにわたってフェードします。GIF側はすべて直角です。他に受け入れられないクライアントのために透過GIFが必要な場合は、それが配置される背景色の上で作成して、フリンジが光るのではなく一致するようにしてください。

非可逆および可逆ファイルにおけるWebPの透過

WebPは、ついに非可逆圧縮にアルファチャンネルを与えたフォーマットです。Googleの圧縮ドキュメントは、「RGBチャンネルには非可逆エンコーディングを、アルファチャンネルには可逆エンコーディングを許可する別のWebPモード」について説明しており、そのcwebpリファレンスではアルファ品質のデフォルトが100に設定されています。つまり、特に指定しない限り、アルファプレーンは可逆で保存されます。

Googleの概要ページでは、可逆WebPはPNGより26%小さいとされ、透過はバイト数で約22%追加され、透過付き非可逆WebPは通常PNGより3倍小さいとされています。

私たち自身の数値もその近辺でした。私たちは背景除去ツールから直接2048×1152の切り抜き（1,211 KBのPNG）を取得し、デフォルト設定でPillowで再保存しました。

可逆WebPは660 KBで、46%小さくなり、すべてのアルファ値がPNGと完全に一致しました。品質80の非可逆WebPは124 KBで、そのアルファプレーンはまだ元のファイルとバイト単位で同一でした。変わったのは色データだけでした。切り抜きのWeb配信には、通常これが望ましいファイルです。編集を続ける予定のマスターコピーには、PNGまたは可逆WebPを使用してください。

SVGの透明な背景：削除する背景がない

SVGには透明にする背景がありません。そもそも持っていないからです。SVGファイルは描画命令のリストです：ここにこの円を描き、この色で塗りつぶします。そのリスト内の何も、それを覆う長方形を追加しない限りキャンバスを塗りつぶしません。SVGが白い背景を持っているように見えるときは、その背後にあるページまたはビューアを見ています。

SVG内の透過は要素ごとに設定されます。MDNのリファレンスでは、fill値のnoneは塗りつぶしを描画しないと説明されているため、図形の内部は透明のままです。fill-opacity属性は図形内の塗りのみをフェードさせ、opacityはストロークを含む要素全体をフェードさせます。

人々がつまずく2つのこと。image要素を介してSVGに埋め込まれたラスタ写真は、写真が持つアルファチャンネルを保持するため、SVG内のJPGは依然として白いボックスを運びます。また、写真をラスタからSVGへのコンバーターに通しても背景は削除されません。それは背景を他のすべてと一緒に図形にトレースするだけです。

なぜ私のPNGは透明でないのか？

これらのチェックを順番に実行してください。最初のチェックをパスしたファイルは、まったく修正する必要がありません。

ビューアが背景を描画しました。 画像ビューアは透明なピクセルの背後に何かを配置する必要があり、多くは白または黒を選びます。ファイルは変更されておらず、表示だけが変わっています。同じPNGをデザインアプリ、暗いページのブラウザタブ、または暗い塗りのスライドで開いてください。ボックスが消えれば、ここで停止してください。

ファイルにアルファチャンネルがありません。 .pngに名前変更されたJPG、透過画像のスクリーンショット、または再エンコードしたメッセージングアプリやCMSを通過したファイルは、すべて不透明に見えます。実際に不透明だからです。画像モードを確認してください。Photoshopでは、チャンネルパネルにアルファチャンネルがリストされているはずです。Windowsでは、プロパティ > 詳細でRGBA PNGのビット深度が24ではなく32と表示されます。Pythonでは、Image.open("file.png").modeがRGBAを返します。アルファがない場合は、レイヤー化された元のファイルに戻り、再度エクスポートしてください。

エッジが硬いかフリンジがある。 階段状の輪郭は1ビットの透過を示し、淡いまたは着色されたフリンジは古い背景色をまだ保持しているエッジピクセルを示します。私たちの赤い壁のテストはそれがどのように起こるかを示しました：飽和した赤い壁に対して白いシャツでは、半透明のエッジピクセルの69%が赤に傾き、新しい背景ではその帯がフリンジとして見えます。修正は、8ビットアルファとマット色なしで再エクスポートすることであり、切り抜きの場合は、元の写真のニュートラルな背景またはマスクの1ピクセル収縮です。

チェッカーボードが焼き付けられている。 画像を拡大縮小してください。灰色と白の四角が画像と一緒に拡大縮小するなら、それらはピクセルです。ストックサイトのプレビュー画像はしばしばこのように提供されます。実際のファイルをダウンロードするか、背景を再度切り抜いてください。

よくある質問

アルファチャンネルはレイヤーマスクと同じですか？

それらはいとこ同士です。AdobeのPhotoshopヘルプでは、アルファチャンネルをチャンネルパネルに編集可能なグレースケールマスクとして保存された選択範囲として説明しており、レイヤーマスクもエディター内で同じように機能します。違いはエクスポート後に何が残るかです。レイヤーマスクはPSD内に存在する編集ツールです。PNGまたはWebPに書き込まれるアルファチャンネルは、すべてのマスクの平坦化された結果であり、他のアプリが実際に読み取る透過性です。

8ビットのアルファチャンネルには何段階の透過がありますか？

256段階で、0（完全に透明）から255（完全に不透明）までです。PNGもサポートする16ビットのアルファチャンネルには65,536段階あります。GIFには2つあります：描画されるかスキップされるかです。

JPGにアルファチャンネルを追加できますか？

JPGのままでいる限りできません。フォーマットにはそれを保存する場所がないからです。ファイルを開き、被写体を背景から分離し、結果をPNGまたはWebPとして保存します。Atlas Cloudのブラウザベースの切り抜きツールは、1ステップで変換を行います：JPG入力、透過PNG出力、無料で使用でき、ログインも不要です。

WebPの透過はすべてのブラウザで機能しますか？

主要ブラウザの現在のバージョンはアルファ付きWebPをレンダリングします。MDNのフォーマットの互換性テーブルは、まだ提供する必要がある古いバージョンのサポートを確認する場所です。レガシーなオーディエンスが重要な場合は、picture要素を介してPNGをフォールバックとして提供してください。

なぜ私の透過PNGには白いハローがあるのですか？

エッジに沿ったピクセルは部分的に透明で、その色はまだ切り抜かれた背景を運んでいます。白い元画像では、その帯は切り抜きを暗いものの上に置くと白いハローのように見えます。8ビットアルファとマットをnoneに設定して再エクスポートするか、保存前に選択範囲を1ピクセル収縮してください。

結論

透過は数値です。RGBA PNGまたはWebPの各ピクセルは0から255のアルファ値を運び、それが理解できれば他のフォーマットは自然に整理されます：GIFは単一のオン/オフフラグを持ち、JPGは何も持たず、SVGはそもそも削除する背景がありません。私たちが測定した7つの切り抜きでは、アンチエイリアスされたエッジ全体が画像の0.7%から2.2%の帯に収まり、これはまさに1ビットフォーマットが捨てる部分です。

ファイルが透明にならなかったために「アルファチャンネルとは何か」を尋ねるためにここに来たなら、まずビューアを確認し、次にファイルのモード、次にエッジを確認してください。そして、エディターを開かずにクリーンなアルファチャンネルが必要な場合は、ブラウザベースの背景除去ツールが、開始したピクセルサイズの単一のPNGでそれを提供します。