PNG画像を256色に減色・最適化してファイルサイズを小さくする : ぴぽや旧ブログ

PNG画像を256色に減色・最適化してファイルサイズを小さくする

2014.03.04

最近のゲーム開発でよく使うPNG画像ですが、エフェクトアニメの画像に使用されるようなαチャンネル(透明度)付きのPNG画像はどうしてもファイルサイズが大きくなってしまいます。
そこで、画像で使用されている色を減らす減色処理をしたり、PNGファイルの中に付随している不要な情報を削除してファイルサイズを小さくすることができます。

減色処理は通常のグラフィックソフトではなかなかできないのですが、WEB用画像の出力ができるAdobeのPhotoshopやFireworksなどでは機能が実装されています。ただ、有料のソフトなので、なかなか手が出しにくいところ。
フリーソフトには減色に特化したソフト、PNGファイルの最適化に特化ソフトがありますので、今回は個別のソフトをいくつか使って、PNGファイルのファイルサイズの減少具合を検証してみたいと思います。

以前にも同じような記事を書きましたが、紹介しているソフトが公開中止となり有料版のみとなってしまいましたので、新たに記事にしてみました。
↓以前の記事
αチャンネル付きPNG画像のファイルサイズを小さくする

まずはこちらのそれぞれタイプの違う３点の元画像を用意します。

・エフェクトアニメ用の画像の１コマ
　見るからに重そうなαチャンネル付き画像ですので、減色効果が期待できますが、グラデーション部分の画質の低下が心配なところ。

・キャラチップ画像
　完全な色数コントロールされたドット絵ですので、減色効果は期待できませんが、純粋にPNGファイルの最適化でどのくらい変わるかが気になります。

・モンスターイラスト画像
　色数が少なめで明暗ハッキリしたPOPなタッチですが、細かい部分で色数を無駄に食っているところがあるので、減色効果が期待できそうです。グラデーションなど多用していないので、おそらく画質もそれほど低下することないでしょう。

次にそれぞれの画像を256色に減色してみます。
使用するソフトは「OPTPiX Pro」と「PNGoo」と「COLGA」です。
OPTPiX Proだけ有料ソフト(販売は終了)なのですが、私が普段使っているものなので、今回比較に使用しました。
減色処理はそれぞれのエンジンで256色・ディザなしで行っています。

・OPTPiX Pro

・PNGoo

・COLGA

キャラチップは当然影響ないとして、エフェクトも白色単色ということもありそれほど画質は落ちてないですかね。
モンスターはCOLGAが若干がたついている印象です。

引き続き、PNGファイルの最適化処理を行います。
使用するソフトは「CGOptimizer 麦茶」と「PngGauntlet」です。
両方とも既存のPNG最適化エンジンを利用してPNGの最適化を行うソフトで、それぞれに重なる最適化エンジンがあるのですが、両方で処理するのが一番ファイルサイズを小さくしてくれます。
各最適化エンジンのパラメータの指定にもよりますが、どちらか片方というなら「PngGauntlet」の方が小さくなる印象です。

・OPTPiX Pro で減色したものを最適化　

・PNGoo で減色したものを最適化　

・COLGA で減色したものを最適化　

最適化処理は基本的には画質に影響与えることはありませんが、まあこんなかんじです。

最終的なファイルサイズの比較はこちらになります。数値部分の単位はバイトです。
エクセルの表のキャプチャですいません；

キャラチップのような256色以下で描かれているドット絵などは減色効果はほとんど出ませんが、PNGファイルの最適化でファイルサイズを小さくすることができますね。
キャラチップがCOLGAで256色にした時にファイルサイズが大きくなっているのは、カラーパレットの情報を既に256色以下のものから256色分確保して付加しているのが原因だと思います。その後PNGの最適化で不要なカラーパレットが削除されfファイルサイズが小さくなっています。
全体的な結果ではCOLGAで減色して、PNGの最適化を行ったものが一番ファイルサイズが小さくなりました。
ただ、モンスターイラストの画質が若干落ちてしまっているので、画質面の処理が気になるところでしょうか。
画質を重視したい場合はPNGooで減色するのが安全そうです。
もしくはCOLGAで処理して、画質が気になるものだけPNGooで処理するなど。

あと、それぞれの減色エンジンでもパラメータの設定などが違うので、その処理でも結果は変わると思いますので、色々試してみるのもいいかも。特に今回は減色でディザなしにしましたが、写実的なリアルな塗りのイラストなんかだとディザ処理を追加して減色した方がキレイだったりします。ものによっては画質的に256色に減色はムリ・・・という場合もありますけどｗ

最後に注意として、今回のように減色・最適化したPNG画像は通常のグラフィック編集ソフトで正常に開けない場合がありますので、元画像はしっかり残しておくことをオススメします！
万が一の対処法として、COLGAで「変換＞ARPGフォーマットに変換」で処理したものを保存すれば、グラフィック編集ソフトで正常に開けるようになると思います。

無料のソフトでここまで出来て、作者の方々には感謝感謝です！

関連記事