🐈‍⬛

PNGをGIFにするとアンチエイリアスが消える

に公開

PNGファイルをGIFに使うと、輪郭のアンチエイリアスが消えてガタガタして見えることが発生したのでメモがてら。

GIFはアルファチャンネルをサポートしていない

結論から言うと、GIFがアルファチャンネル(透明度)をサポートしていないことが原因だった。
使おうとしていたPNGファイルは背景を透過させていたのだが、そのアンチエイリアス部分は半透明のピクセルになっていたっぽい。
それがGIFに変換されるさい、すべて完全透明または不透明に置き換えられていたため、アンチエイリアスが消えたように見えたのだと思われる。

解決策

自分の場合は、もともとGithubのプロフィールアイコンに使うために出力したGIFで、背景を透過させる必要性が別になかったので、背景を白塗りにして色のみでアンチエイリアスが表現されるようにすることで解決した。
GIFにしたい、でも背景を透明にしたいという場合は境目付近の処理に一工夫必要かも。

(余談):Githubのアイコンに作ったGIF画像をアップロードしたところ、ただの静止画として表示された。どうやらGithubのアイコンにはGIFのアップロード自体はできるものの、動いて見えるようにはならず、最初のフレームが静止画として表示されるらしいというオチ(⑉・̆-・̆⑉)

Discussion