【ITニュース解説】Premultiplied alpha didn't remove my cutout's white fringe

背景を透過した画像をウェブページやアプリケーションに表示する際、画像のエッジ部分に意図しない白い縁（フリンジ）が現れることがある。この白いフリンジは、特に暗い背景の上に画像を重ねたときに目立ち、見た目を損ねる原因となるため、システムエンジニアとして画像を取り扱う場合、その原因と対処法を理解しておくことが重要である。

この問題の解決策として、一般的に「プレマルチプライドアルファ」という合成方法を用いると良いとされてきた。しかし、ある開発者が行った検証の結果、この常識が常に当てはまるわけではないことが示された。本記事では、この検証結果を基に、白いフリンジの本当の原因と、それに対する適切なアプローチについて解説する。

まず、画像の透明度を扱う「アルファチャンネル」について理解しよう。アルファチャンネルは、各ピクセルがどれくらいの透明度を持つかを示すデータである。このアルファチャンネルの表現方法には、主に「ストレートアルファ」と「プレマルチプライドアルファ」の二種類がある。

ストレートアルファは、ピクセルの色情報（赤、緑、青）と透明度情報（アルファ）を完全に独立して保持する形式である。例えば、半透明の赤いピクセルは「赤」という色と「50%透明」というアルファ値を別々に持っている。PNG画像フォーマットはこのストレートアルファを採用しているため、多くの透過PNGはストレートアルファ形式で保存されている。

一方、プレマルチプライドアルファは、ピクセルの色情報に透明度情報が既に掛け合わされている形式である。つまり、半透明の赤いピクセルは、既に透明度が適用されて「薄い赤」として色情報が保存されている状態を指す。この形式は、グラフィック処理を行うGPU（グラフィックス処理ユニット）の内部処理でよく用いられる。これは、合成処理を効率化するためであり、正しく扱えばストレートアルファと同じ最終的な合成結果を得られる。重要なのは、これら二つの形式はデータの持ち方が異なるだけであり、それぞれの形式に合った合成計算式を使えば、見た目の結果は同じになるという点だ。問題は、これらの形式を混同して、誤った合成計算式を使ってしまうことにある。

筆者は、背景を透過した子犬の画像と観葉植物の画像を使って、白いフリンジが発生する状況をテストした。まず、通常のストレートアルファ形式で画像を暗い背景に合成した場合、フリンジの平均輝度（明るさ）は75.4だった。次に、ストレートアルファの画像を一度プレマルチプライドアルファ形式に変換してから合成した場合も、フリンジの平均輝度は変わらず75.4だった。この結果は、一般的なアドバイスに反して、プレマルチプライドアルファへの変換が白いフリンジを消す効果がないことを明確に示している。つまり、このケースにおいてフリンジは合成処理の問題ではなかった。

では、この白いフリンジは一体どこから来るのだろうか。筆者の詳細な分析によれば、フリンジの白い部分は、画像の「エッジピクセル」、つまり被写体の輪郭部分にある画素に、最初から白い色情報として保存されていることがわかった。これは、背景除去処理を行う際に、元画像のエッジ部分が被写体と背景の色の両方を含んでしまっているために起こる現象だ。例えば、白い背景で撮影された犬の写真を切り抜く場合、犬の毛の細い部分や輪郭は、カメラのレンズを通して見ると、白い背景色と犬の毛の色が混ざり合った状態として記録される。背景除去AIは、この混ざった色のピクセルに対して、完全に透明にするのではなく、わずかに色を残しつつ半透明として処理することがある。その結果、エッジピクセルには、被写体の色と元々の背景の白い色が混ざった、少し明るい色がデータとして残ってしまうのだ。この残った明るい色が、暗い背景に重ねたときに「白いフリンジ」として目立つことになる。

筆者はまた、誤った合成処理を行った場合の結果も示している。もしストレートアルファ形式の画像を、誤って「プレマルチプライドアルファとして」合成処理してしまうと、フリンジの輝度が75.4から160.1へと大幅に上昇した。これは、ストレートアルファ形式の色情報はまだ透明度が適用されていない状態なのに、プレマルチプライドアルファ用の合成式を使ってしまうと、色を薄めるためのアルファ値の掛け算が適切に行われず、データに保存されている生の色情報が過剰に表示されてしまうためである。WebPGLなどの環境で、テクスチャのプレマルチプライドフラグを誤って設定した場合などに、このような問題が発生する可能性がある。

このことから、白いフリンジの根本的な解決策は、合成方法を変更することではなく、「画像のデータそのもの」を変更することにあるとわかる。つまり、エッジピクセルに残ってしまった不要な白い色情報を除去する必要があるのだ。背景除去ツールの中には、このフリンジを除去するための機能を持つものもある。例えば、筆者が使用したImgIngというツールの「背景色フリンジ除去」機能は、エッジピクセルのアルファ値を書き換えることで、この白いフリンジを目立たなくする。

しかし、このデータ変更によるフリンジ除去にもトレードオフが存在する。筆者の検証では、子犬の画像ではフリンジが効果的に除去できたものの、白い斑点のある観葉植物の画像では、その白い部分が背景と誤認され、フリンジ除去によって一部が透過して穴が開いてしまう現象が見られた。これは、被写体自体が背景色に近い色を持つ場合に、フリンジ除去処理が被写体の色までをも背景と判断してしまい、意図しない透過や色の変化を引き起こす可能性があることを示している。

したがって、システムエンジニアが背景透過画像を扱う際は、以下の手順で問題に対処するのが賢明だ。まず、使用する画像ファイルのアルファチャンネルが「ストレートアルファ」か「プレマルチプライドアルファ」かを確認し、その形式に合った正しい合成計算式を使っているかを徹底的にチェックする。この計算が正しく行われているにもかかわらず白いフリンジが残る場合は、それは合成方法の問題ではなく、画像データそのものに問題がある可能性が高い。その場合は、画像編集ツールが提供するフリンジ除去機能の利用を検討するが、被写体の色が背景色と似ている箇所がないか、フリンジ除去によって被写体に悪影響が出ないかを事前に慎重に確認することが重要である。これにより、視覚的に高品質なアプリケーションやウェブページを構築できるだろう。