アルファチャンネルは ピクセルに保存される 4 番目の値で、透明度を制御します。、色を設定する赤、緑、青の値と並んでいます。アルファは、完全に不可視から完全にソリッドまでの範囲にわたって実行され、その間のあらゆるレベルの部分透明度が含まれます。これが、PNG ロゴが背景にきれいに浮かぶことができるのに、JPG ロゴが背景上にきれいに浮かぶことができない唯一の理由です。 JPGにはアルファチャンネルがまったくありません。透明性は目のトリックや画像全体の特性ではありません。個々のピクセルに付加されたデータです。このガイドでは、アルファチャネルとは何か、アルファチャネルが何百もの透明度レベルを保存する方法、透明なレイヤーをブレンドする合成演算、アルファチャネルをサポートする形式、および画像をある形式から別の形式に変換するとどうなるかについて説明します。

アルファチャネルとは実際には何ですか

すべてのデジタル画像はピクセルのグリッドであり、すべてのピクセルにはそれを表す数値が格納されています。標準のカラーイメージでは、各ピクセルに赤、緑、青の 3 つの数値が保持されます。アルファチャネルは、別の質問に答える 4 番目の数字を追加します。つまり、このピクセルは何色であるかではなく、 どれくらい見るべきですか。ピクセルは、明るい赤で完全にベタになることも、明るい赤で半分透明になることも、明るい赤で完全に見えなくなることもあります。 3 つのケースすべてで色は同じままです。アルファのみが変わります。この色と不透明度の分離により、柔軟な透明性が可能になります。

この用語は、1984 年にトーマスポーターとトムダフによって出版された、画像と透明度を組み合わせる方法を形式化したアルファ合成の研究に由来しています。彼らのモデルは今でも、最新のグラフィックスプログラム、Web ブラウザー、ゲームエンジンの基礎となっています。したがって、アルファチャネルは、画像フォーマットに最近追加された便利なものではありません。これは、画面上に重ねて表示されるほぼすべてのものに静かに電力を供給する、数十年前のアイデアです。

RGBA: すべての透明ピクセルの 4 番目の値

ピクセルが透明度を保持する場合、3 つの値ではなく 4 つの値で記述され、次のように記述されます。 RGBA: 赤、緑、青、アルファ。デザインやWebの仕事のいたるところでこの表記を目にします。 CSS では、rgba(255, 0, 0, 0.5) のような色は、不透明度 50 パーセントの純粋な赤を意味します。画像エディターでは、同じアイデアがレイヤー上の不透明度スライダーとして表示されます。 A は常に不透明度の値であり、カラーに混合されるのではなく、カラーの上に重ねられます。

アルファを色から切り離しておくことは重要です。透明度がカラー値に焼き付けられている場合、半透明の赤を明るいピンクとして保存する必要があり、元の赤を復元したり、暗い背景の上にきれいに配置したりすることはできません。不透明度を独自のチャネルとして保存することにより、この形式は実際の色をそのまま維持し、その背後にあるものとそれをブレンドする方法をソフトウェアに決定させます。この柔軟性こそが、デザイナーがアセットを背景に事前にミックスするのではなく、アルファチャンネルを使用してアセットをエクスポートする理由です。

アルファが透明度のレベルを保存する方法

アルファチャネルは、オンまたはオフを保存するだけではありません。標準の 8 ビット画像では、アルファは次のようになります。 0 ～ 255 の 256 の異なるレベル。値 0 はピクセルが完全に透明で非表示であることを意味し、255 は完全に固体で不透明であることを意味し、その間のすべての数値は部分的な透明度を生成します。値を 128 にすると、ピクセルのおよそ半分が透明になり、背景が 50% の強度で透けて見えます。

これら 256 のレベルにより、透明度が荒くならず滑らかに見えるようになります。ドロップシャドウは、そのピクセルのアルファ値がエッジに向かって減少するため、徐々に薄れていきます。ガラスや煙の効果は、ピクセルごとに異なる量でシースルーされるため機能します。ハイエンドフォーマットはさらに進化: 16 ビットアルファチャンネルが提供 65,536 レベル 8 ビットは Web 画像の標準であり、目に必要なものはすべてカバーされていますが、プロの合成には最適です。

アルファ合成: レイヤーをブレンドする計算

透明なピクセルが背景の上にある場合、ソフトウェアは最終的に表示される色を計算する必要があります。これは、単純なブレンド式で行われます。目に見える結果は、 前景色にそのアルファを掛け、背景色に 1 を掛けてアルファを引いた値を加算します。。わかりやすく言えば、70% 不透明なピクセルは、そのピクセル自身の色の 70% を占め、背景の 30% を透過させます。

この計算をすべてのピクセルにわたって実行すると、写真に溶け込んだロゴ、ビデオの上にフェードアウトしたキャプション、Web ページ上に描かれたメニューなど、きれいな合成結果が得られます。これは常に起こっています。ブラウザーが半透明の要素を描画するたび、またはゲームが煙をレンダリングするたびに、1 秒間に何百万回もアルファ合成が実行されます。アルファチャネルは、数式が各ピクセルに必要とする不透明度の値を提供します。

アンチエイリアス: アルファによってエッジが滑らかになる理由

アルファチャンネルの最も重要な仕事の 1 つは、 クリーンでアンチエイリアス処理されたエッジ。円形のロゴの湾曲したエッジを考えてみましょう。透明度がないと、曲線は硬い正方形のピクセルから構築する必要があり、ギザギザの階段状の外観になります。アルファチャネルを使用すると、エッジに沿ったピクセルが部分的に透明に設定され、形状がその背後にあるものに徐々にブレンドされます。

適切に作成された PNG ロゴが白いページ、暗いページ、または写真上で鮮明に見えるのはこのためです。エッジのピクセルは白や単色で塗装されていません。部分的に透明なので、あらゆる背景に対して正しくブレンドされます。そのロゴを白に平坦化すると、同じエッジのピクセルが部分的に白になります。平らにしたバージョンを暗い背景に置くと、滑らかなブレンドが間違った色に固定されていたため、醜い淡いハローが見えます。アルファチャネルは、エッジの適応性を維持するものです。

ストレートアルファと事前乗算アルファ

カラーとアルファを一緒に保存するには 2 つの方法があり、その違いを理解することで、イライラするようなバグを防ぐことができます。で ストレートアルファ、カラー値は変更されず、アルファは完全に分離されたままになります。これが、PNG が透明度を保存する方法です。で 事前乗算されたアルファ、色の値には事前にアルファが乗算されるため、50% の透明な赤はすでに暗い赤として保存されます。

事前乗算されたアルファは、特定のブレンド操作を高速化し、エッジでの暗いフリンジを回避するため、ビデオ、フィルム合成、およびリアルタイムレンダリングで一般的です。ストレートアルファは、元の色を復元可能に保つため、静止画像や Web アセットでより一般的です。ソフトウェアが一方を予期し、もう一方を受信した場合に問題が発生し、エッジが暗すぎたり、奇妙に明るく見えたりすることがあります。 PNG や Web グラフィックスを使用した日常的な画像作業では、ストレートアルファを扱うことになり、ソフトウェアがそれを処理します。

アルファチャンネルをサポートする画像フォーマットはどれですか

すべての形式で透明度を保存できるわけではありません。これは、変換中に人々をつまずかせる実際的な詳細です。

PNG: 256 レベルの完全な 8 ビットアルファチャネル、透明な Web グラフィックの標準。
ウェブP: 可逆モードと非可逆モードの両方で完全なアルファチャネルを生成しながら、PNG よりも小さいファイルを生成します。
AVIF: アルファサポートと強力な圧縮を備えた最新の形式で、ブラウザのサポートが増加しています。
GIF: シンプルなオンまたはオフの透明度のみで、部分レベルがないため、エッジが粗く見えます。
TIFF と SVG: どちらも透明度をサポートしており、それぞれ印刷作業とベクター作業で使用されます。
JPG と BMP: アルファチャネルがまったくないため、透明度を保存できません。

重要なのは、透明性を維持する必要がある場合には PNG と WebP が信頼できる選択肢であり、GIF はハードエッジのカットアウトにのみ機能し、JPG は透明なものには対象外であるということです。

Web および CSS のアルファチャネル

Web では、アルファチャネルは 2 つの場所 (画像ファイル内と CSS カラー値内) に表示されます。透明な PNG または WebP はファイル自体にアルファを保持するため、任意のページの背景の上に重ねられます。次に CSS は、rgba() および hsla() カラーと不透明度プロパティを備えたコントロールの 2 番目のレイヤーを追加します。これにより、画像をまったく編集せずに、要素をフェードさせたり、オーバーレイに色合いを付けたり、ガラス効果を構築したりすることができます。

この組み合わせが、最新のインターフェイスが多層的で柔らかく見える理由です。ヒーローセクションでは、CSS アルファを使用して白いテキストを読みやすくするために写真の上に半透明のダークオーバーレイを重ねることができます。一方、上部のロゴは画像アルファを使用してどちらかにきれいに配置されます。どちらも同じ基本的な考え方に基づいています。つまり、各ピクセルは独自の不透明度を持ち、ブラウザーはすべてをリアルタイムで合成します。

JPG に変換するとアルファはどうなりますか

JPG にはアルファチャネルがないため、透明イメージを JPG に変換するには、透明イメージを固体のものに置き換える必要があるという決定が必要になります。コンバーター アルファを平坦化し、すべての透明または半透明のピクセルを背景色で塗りつぶします。、ほとんどの場合は白です。シースルー領域はソリッドになり、部分アルファに依存していた滑らかなエッジはその塗りつぶしの色にロックされます。

変換後にロゴが白または黒のボックス内に収まったり、ロゴの端にかすかなハローが表示されたりするのはまさにこれが理由です。 JPG には保存する場所がなかったため、新しい背景とブレンドするために必要な情報が失われています。生き残るために透明性が必要な場合、答えは PNG を維持するか、代わりに WebP に変換することです。本当にフラットな画像が必要な場合は、適切な塗りつぶしの色を選択することが重要です。私たちのコンバーター塗りつぶしに白、黒、またはカスタムカラーを選択したり、WebP をエクスポートしてアルファチャネルを完全に保持したりできます。透明な背景ガイド通り抜けます。

一般的な透明性の問題とその回避方法

透明度の問題のほとんどは、アルファチャネルが間違った色に対して平坦化されること、つまりマットと呼ばれるステップに遡ります。通常の犯人は次のとおりです。

ホワイトボックスまたはブラックボックス: JPG に変換された透明 PNG は、背景を単色で塗りつぶします。塗りつぶしを目的地に合わせるか、透明度を維持します。
エッジのハローまたはフリンジ: ロゴを白につや消しにして暗い背景に置くと、淡い輪郭が現れます。正しい色にマット化された元の透明ファイルから再エクスポートするか、透明のままにします。
ダークフリンジ: 多くの場合、ストレートアルファと事前乗算されたアルファの不一致が発生します。正しいアルファタイプで再エクスポートすると問題は解決します。
編集後に透明度が失われる: レイヤーを平坦化するか JPG として保存すると、アルファが破棄されます。レイヤー化されたマスターまたは PNG マスターを保持します。

これらのほぼすべてを防ぐルールは、フラット化する前に背景を決定し、きれいに再エクスポートできるようにアルファチャネルが残っている元のファイルを保持することです。

よくある質問

アルファチャンネルとは何ですか?

アルファチャンネルは 透明度を制御するピクセルごとの値、完全に不可視から完全にソリッドまで、ピクセルの色を設定する赤、緑、青と一緒に保存されます。

RGBAとはどういう意味ですか?

RGBAはの略です 赤、緑、青、アルファ。アルファ値は、色の上にピクセルの不透明度を設定するため、rgba(255, 0, 0, 0.5) は 50 パーセントで赤になります。

PNG には透明度があるのに、JPG には透明度がないのはなぜですか?

なぜなら PNG にはアルファチャネルが含まれますが、JPG にはアルファチャネルが含まれません。ピクセルごとの不透明度を保存する場所がなければ、JPG は透明度をまったく保持できません。

アルファチャネルには何レベルの透明度を保存できますか?

標準 8 ビット画像の 256 レベル、非表示の 0 からソリッドの 255 まで。プロフェッショナル 16 ビットアルファは、細かい合成のための 65,536 レベルを提供します。

JPG に変換するとアルファチャネルはどうなりますか?

平らになっています。 透明な領域を単色で塗りつぶしますJPG には不透明度データを保存する方法がないため、通常は白です。

どの画像形式がアルファチャネルをサポートしていますか?

PNG、WebP、AVIF、TIFF、SVG アルファをサポートし、PNG と WebP は滑らかな部分透明を提供します。 GIF にはオンまたはオフの透明度のみがあり、JPG には透明度がありません。

ストレートアルファと事前乗算アルファのどちらが優れていますか?

どちらが一般的に優れているというわけではありません。彼らはさまざまな仕事に適しています。 ストレートアルファにより色を回復可能に保つ 静止画に適しており、事前に乗算されたアルファによりビデオとリアルタイムレンダリングのブレンドが高速化されます。

ファイルサイズを小さくするときに透明度を保つにはどうすればよいですか?

に変換する JPG の代わりに WebP。 WebP はアルファチャネルを維持しながらサイズを 25 ～ 35 パーセント削減するため、背景は透明のままでファイルが軽くなります。