2014年4月22日

アルファチャンネル付き PNG の減色

最近公開した楽曲用ページを作る際に、簡単なパララックス風の効果を作るためにアルファチャンネル情報を持った画像ファイルを複数扱う必要があるケースに出くわした。

以前ゲームを作った時は画像のデコード処理自体を外部デコーダに頼らなくてもできる状況だったので画像ファイルを WebP 形式にして、PNG 形式で 3.60MB ぐらいあった画像が 207KB まで容量削減できた(※この時使った WebP 形式はロスレスではない)のだが、ブラウザで WebP 形式を使うのは時期尚早……というかまともに使える日は来るんだろうか。
JavaScript によるデコーダがあることも知ってはいるもののわりとどうでもいい理由でボイコットされても困るし、それは冗談としても、とにかく WebP 形式は今回の選択肢にはなかった。

そうなると PNG の最適化の路線が残るわけで、まずは有名どころの PNGGauntlet を試してみた。圧縮アルゴリズムの最適化だけではそう大きくは縮まないだろうとは思ってはいたものの、ほぼ容量が変わらなかったので、別のアプローチの併用も必要そうだと思った。

とはいえここまで来ると減色ぐらいしか選択肢がない気がしてきた。
昔、今よりもインターネットが好きだった頃は OPTPiX webDesigner v2.x を買って使ったりもしていたこともあったものの、今となっては開発終了してしまっていて v2.x 系では少なくともアルファチャンネル付き PNG は扱えない。WebFree 版は制限厳しそうで面倒そうだし、Padie 系列のソフト類も現状は消息がよくわからんことになってるし、COLGA も試してみたものの容易く視認できるぐらいに劣化してしまった。

などと困っていたところで PNG Color Reducer Pro を見つけた。
試しに減色してみたら見た目がほとんど変化しないまま減色後の画像が生成された。
減色後のファイルサイズが表示されなかったのでどのぐらい縮んだのかわからず若干不安ではあったものの、楓 software の人は以前からアルファチャンネル対応動画形式の実装日記なんかも書いてて半透明を含む圧縮という分野での遭遇は初めてじゃないし、少なくとも出力結果から視認できるレベルの劣化は見当たらなかったのですぐ購入して実際にファイルを書き出してみた。

左が元のファイル、右が減色後のファイル

全体で 10MB 近かったファイルが、3.12MB まで縮めることができた。この縮んだあとのファイルを改めて PNGGauntlet にかけると最終的には 2.88MB 程度まで縮んだ。全てのファイルを WebP 形式に変換した場合は非可逆圧縮によってエッジが丸くなりつつも 1.78MB ぐらいにはなったので、PNG で 2.88MB は結構頑張ってる感じがする(根拠なし)。

思わぬところで良いツールに出会えてよかった。
欲を言えば自分の用途ではブラウザがある場所で使うことが多いので、NativeClient で動く Chrome アプリ版とかがあるとどこでも簡単に使えて嬉しいなあと思った。
Clip to Evernote