【ITニュース解説】What I check before a transparent PNG gets cut to 256 colours

透明なPNG画像を扱う際、特にウェブサイトやアプリケーションで使用するためにファイルサイズを小さくする「減色」という処理を行うことがある。しかし、この減色処理が思わぬ落とし穴となり、画像の品質を損ねることがある。特に半透明な影を持つ画像において、この問題は顕著に現れる。元の画像では滑らかに表現されていた影が、減色処理によって不自然な黒い帯になったり、ギザギザとした縁に変わったりすることがあるのだ。

この問題の根源は、画像の透明度を制御する「アルファ値」の扱いに起因する。アルファ値は各ピクセルがどれくらい透明かを示す値で、0が完全に透明、255が完全に不透明を表し、その間の値で様々な半透明を表現する。しかし、減色処理の際に、この多くのアルファレベルが、例えば「完全に透明」か「完全に不透明」の2段階に切り捨てられてしまうことがある。記事の例では、元のリボン画像が256段階のアルファレベルを使っていたのに対し、減色後には2段階にまで減っていた。これは、半透明な影のピクセルが、ある閾値（例えばアルファ値が128）を境に、それより上は不透明、それより下は完全に透明として扱われてしまったことを意味する。このような極端なアルファレベルの削減が行われると、繊細な影の部分は失われ、まるで紙で切り抜いたかのような不自然な縁になってしまう。もし減色後の画像でアルファレベルがたった2段階にまで落ちていることが確認できたなら、その画像はすでに品質上の問題を抱えている可能性が高いと判断できる。

この品質問題をチェックする最初のステップは、「アルファレベルの数」を数えることだ。元の画像と、減色後の画像で実際に使われているアルファ値の種類がどれくらいあるかを確認する。レベル数が大幅に減っている場合、それは問題発生の兆候である。

次に重要なのは、画像を様々な背景色の上に置いて、その見え方を比較することだ。これは、人間の目では特定の色の上でしか問題が発見できないことがあるためだ。例えば、影が暗い色で構成されている場合、その画像を黒い背景の上に重ねると、影の部分が背景に溶け込んでしまい、品質の劣化に気づきにくい。記事の例でも、2段階に減色されたリボン画像は、黒い背景の上では元の画像とほとんど同じように見えたと述べている。しかし、同じ画像を白い背景や青い背景の上に置くと、不自然な黒い帯やギザギザした縁がはっきりと現れる。これは、異なる背景色との色の差が大きくなることで、隠れていた問題が露呈するためだ。このため、画像を評価する際には、少なくとも白、黒、そして中間の色の背景（記事では青）の3種類で確認することが推奨される。

より客観的に品質を評価するためには、数値を用いる方法がある。記事では、PythonのPillowライブラリとNumPyライブラリを使って、元の画像と減色後の画像を数値的に比較する手法が紹介されている。具体的には、まず画像ファイルを読み込み、各ピクセルの色（RGB）と透明度（A）の情報を数値の配列として扱う。そして、「オーバー（over）合成」と呼ばれる方法で、画像と背景色を重ね合わせた結果のピクセル値を計算する。この計算結果を使って、元の画像と減色後の画像が、特定の背景の上でどれくらい異なるかを平均RGB差という形で数値化する。平均RGB差は0から255のスケールで表され、値が大きいほど色の違いが大きいことを意味する。さらに、色の差が24（これは筆者が経験的に「目立つ差」と判断した閾値）を超えるピクセルがどれくらいの割合で存在するか、という指標も用いる。これらの数値を見ることで、視覚的に見つけにくい品質の劣化も客観的に把握できる。記事のリボン画像の例では、白い背景での平均RGB差が44.17と高かったのに対し、黒い背景では2.33と非常に低かった。この差が、黒い背景では問題が見逃されやすい理由を明確に示している。

透明なPNG画像を256色に減色する場合でも、全てのアルファレベルが失われるわけではない。PNG形式には、「Indexed PNG（インデックスカラーPNG）」というモードがあり、これを利用することで、少ない色数（256色以下）で画像を表現しつつ、各色に異なる透明度（アルファ値）を設定できる機能が備わっている。これは「tRNSチャンク」というPNGの内部データによって実現される。筆者はこの機能を使って、減色されたリボン画像が256色でありながら、34段階や98段階といった多くのアルファレベルを保持できることを実証している。これは、安易に2値化されたアルファ値を持つ画像とは異なり、影やグラデーションを滑らかに表現できることを意味する。多段階のアルファ値を保持するIndexed PNGは、ファイルサイズが多少増える可能性があるが、品質を大きく向上させることができる。

最終的に、半透明な影や複雑な透明度を持つ画像を扱う際には、PNG-8形式（256色PNG）の利用を避けて、WebP形式への移行が強く推奨される。WebPはGoogleが開発した新しい画像形式で、PNGやJPEGよりも高い圧縮率を実現しながら、透明度（アルファチャンネル）を高品質に保持できる。記事の例では、元の430.7KBのリボン画像が、WebP形式に変換することで98.8KBと大幅にファイルサイズが削減され、しかもアルファ値は元の画像と完全に一致する精度を保ったと報告されている。WebPは、現代のウェブ環境において、ファイルサイズと品質の両面で優れた選択肢と言える。PNG-8は、スクリーンショットやシンプルなフラットアイコンなど、透明度が完全に不透明か完全に透明かの2値で十分な場合に限定して使用することが賢明だ。

今回紹介されたチェック方法は、透明な画像を扱う際の品質劣化を発見し、評価するための有効な手段だ。特に、まずアルファレベルの数をチェックし、次に複数の背景色で客観的な数値比較を行うことで、見た目では気づきにくい問題を特定できる。そして、問題が見つかった場合には、Indexed PNGの活用やWebP形式への移行を検討することが重要となる。ただし、このチェック方法にも限界がある。例えば、数値的な平均RGB差は人間の知覚的な色の差を完璧に表すものではないし、設定された閾値（24）も絶対的な基準ではない。また、検証されたのは限られたサンプルであり、複雑な色の影や光沢のある表現、特定の圧縮ツールによる再圧縮など、あらゆるケースを網羅しているわけではない。しかし、システムエンジニアとして画像コンテンツを扱う際には、ここで紹介された知見を活かし、画像をただ減色するだけでなく、その品質がどのように変化するかを意識的に確認する習慣を身につけることが、高品質なユーザー体験を提供する上で非常に重要となるだろう。