😽

画像ファイルの透過について

に公開
画像
tech

ChatGPTやGeminiで、アイコン生成(PNGファイル)をしていたのですが背景の透過がどうもうまくいきません。そこでそもそも透過とはなんなのか整理します。

画像ファイルを透過する、とは？

  • 画像ファイルの透過とは、ファイルのアルファチャンネルの値を0にする(近づける)こと
  • 一般にアルファチャンネルを持つ画像ファイル形式はPNG, GIF

アルファチャンネルとは？

  • 一般的に、画像は「RGB (赤,緑,緑)」の3つのチャンネルで色を表現する
    • チャンネルとは、0 ~ 255までの色要素で表現され、その色がどれだけ強調されるかを表す
  • アルファチャンネルは、RGBに追加された第4のチャンネルで、各ピクセルの透明度(不透明度)を 0 ~ 255 で表す

アルファチャンネルを持つか確認する方法は？

sips -g all icon.png | grep Alpha
> hasAlpha: no

AIの生成したアイコンはどれもアルファチャンネルがありませんでした。

透過するコマンド

ImageMagicが入っていれば以下のコマンドで透過できた。

convert icon.png -transparent white output.png

sips -g all output.png | grep Alpha
> hasAlpha: yes

透過されたファイルの模様について

画像の透過された部分は市松模様になるが、これに正式な呼び名はないようで、チェッカーボードとかと呼ばれるらしい。

各デザインツールや画像ビューアで同様の模様が見られるが、標準化されたものではなく、慣習的に広まり使われるようになったデファクトスタンダードなもののようです。

生成AIが画像を透過できなかった理由

AIが生成した画像は、チェッカーボードを模様としてつけただけのPNGファイルで、アルファチャンネルがないものでした。
その後の条件指定でアルファチャンネル付でPNG生成を依頼してもうまくいかず、最終的にはImageMagicで透過することにしました。

Discussion