ぴぽやフレンズ Fantia
ぴぽや - ゲームグラフィック素材販売 -

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

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

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

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


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

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

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

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


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

・OPTPiX Pro
optpix_png1.png
optpix_png2.png optpix_png3.png

・PNGoo
pnggo_png1.png
pnggo_png2.png pnggo_png3.png

・COLGA
colga_png1.png
colga_png2.png colga_png3.png

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



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

・OPTPiX Pro で減色したものを最適化 
optpix_mugicha_gaunt_png1.png
optpix_mugicha_gaunt_png2.png optpix_mugicha_gaunt_png3.png

・PNGoo で減色したものを最適化 
pnggo_mugi_gaunt_png1.png
pnggo_mugi_gaunt_png2.png pnggo_mugi_gaunt_png3.png

・COLGA で減色したものを最適化 
colga_mugicha_gaunt_png1.png
colga_mugicha_gaunt_png2.png colga_mugicha_gaunt_png3.png

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


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

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


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



無料のソフトでここまで出来て、作者の方々には感謝感謝です!
関連記事
プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!

TwitterFantia-ぴぽやフレンズYoutubeチャンネルtwitchチャンネル

▼運営サイト
・ぴぽや - ゲーム画像素材販売 -
 有料素材の販売
・ぴぽや倉庫
 公開した素材のまとめ

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki

ご感想・ご利用報告・ご連絡


最新記事一覧
AfterEffectsでゲーム用画像素材を作ろう1 基本的な流れ 2018/04/13
ゲーム制作&ゲーム向け素材情報 2018年3月分 2018/04/02
2018年3月 DLsite.comで発売されたゲーム向け素材紹介 2018/04/02
戦闘エフェクトアニメ ヒットエフェクト11点 2018/03/25
ぴぽやフレンズ 経過報告 2018/03/18
カテゴリ
最新コメント
リンク

リンクして頂ける場合はこちらのバナー画像をお使いください。
※バナー画像なしでも構いません。

RSS
広告
おすすめ有料素材
同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite.com

タイルセット(マップチップ)
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
普通シティ 現代日本都市タイルセット
ファミコン風RPG基本マップ素材セット

背景イラスト
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03

エネミーイラスト
イラスト素材集-baroque-
イラスト素材集-異界のアリス-
RPG制作に使えるデフォルメ素材集~モンスター娘編~ Vol.3

キャラチップ
どうぶつキャラクターチップセット3

キャラ立ち絵
中世ファンタジーRPG風2Dキャラクターパック【キャラクター画像素材】
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)

エフェクトアニメ
物理攻撃エフェクト素材集1 71点収録
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット

アイコン
イラストアイコン素材集Vol.2-和-
イラストアイコン素材集Vol.1
ゲーム製作用アイコン集#01
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材2

ゲーム制作ソフト
SMILE GAME BUILDER
SRPG Studio
ティラノビルダー PRO