JPEGとPNG、画像容量の話
フリゲを作る際に使う画像は、JPEGとPNGが多いのではないかと思います。後はGIFでしょうか。ブラウザ向けならSVGもあると思いますが、今回はおそらくメインであろう、JPEGとPNG画像の容量、その減らし方について書いてみたいと思います。
ただ容量を減らすと劣化する場合があるので、絶対にクオリティを優先するものや、そこまでして容量減らさなくておｋという場合は、特に気にしなくても良いと思います。逆に私のようにPC容量カツカツだったり回線が細くてアップロードが辛かったりする場合は、気にしておくとデータ管理が楽になるのではという感じです。
あと、UnityだとUnity側で独自の処理が入るので、それ用のアレをした方が軽量化できると思います。描画処理周りは未着手です。単純に容量のお話です。ではいきます。
まず、そもそもとして、
JPEGにするかPNGにするか問題
というのがあります。PNGは透過できるので、立ち絵やアイコンなんかはPNGじゃないといけませんが、一枚絵、CGイラストはどうするか。
私は基本的に、JPEGにしています。というのも、フルカラーPNGは綺麗なんですが、そのままだと画像容量がめっちゃ大きくなるので、扱いづらいからですね。でっかくて色数多いと一枚1MBいったりします。おお。
ただ、PNGは減色をすると、容量を減らせます。フルカラーではなくて、256色にするわけです。しかし、元々色数の多い画像を減色すると、なんかこう……色欠けてません……？ みたいな見かけになっちゃいます。
そして、ここがポイントなのですが、
- 減色したPNGより、品質85～90で出力したJPEGの方が、劣化しないし容量軽い
ということがままあります。これは私の経験則です。根拠は？と言われると、何かそんな感じ、としか言えないですが、ほぼみっかプラスのCGは、大体品質90JPEGなので、ご覧いただいた方は、そんな劣化してない感をお分かりいただけるのではないかと思います。
実際どんな見た目なのよ問題
折角なので、実演してみましょう。
これはほぼみっかプラスの清瀬君別日に入れた清瀬君画像です。今見るとなんかめっちゃ恥ずかしいですが、それは置いときまして、フルカラーPNG、減色PNG、品質100JPEG、品質95JPEG,品質90JPEG、品質85JPEG、品質80JEPGと左右の順で載せています。KB数も入れました。
いかがでしょう。ありすぎてわけ分からん感もありますが、減色PNGは色が欠けていて、品質90JPEGは普通にフルカラーPNGっぽいのではないでしょうか。これ80まで落としても、拡大しなければそんな劣化感もないですね。フルスクにしない場合は80でもいけるかもしれません。95・100はKB数増えた割に90と変わらない気もします。
JPEGの品質について、Googleは85を推奨しているようです。85より上げても容量増えるけど品質はそんな目に見えて上がらんよという感じですね。実際そんな感じがします。
画像を最適化する
https://developers.google.com/speed/docs/insights/OptimizeImages
これについてQiitaで検証されている方がいるので、こちらもご覧になってみてください。
Googleが薦める「Jpegの品質は85」を検証する
https://qiita.com/miyanaga/items/a616261de490cc342d0
私の経験だと、CGイラストはとりあえず品質90JPEGにしておくと、容量をそれなりに減らせる＋一つ一つどの程度劣化しているか確認しなくて済む、というあたりで、一番楽な感じです。注視しないor拡大しないイラストなどは、85か80で出力すると、クオリティと容量のバランスが取りやすいと思います。こうして見るとCGイラストも基本85でも大丈夫かもしれませんね。
PNG減色のお話
PNG画像の減色の話をしましたが、そもそも減色ってどうやるのか、というと、私はPNGooを使ってます（WindowsPCです）。
pngquant
https://pngquant.org
このサイトにあるやつですが、英語なので、下記の紹介ページがDL方法も使い方も分かりやすいと思います。
【画像軽量化！】PNG画像の軽量化ツールの決定版「PNGoo」の使い方
https://web-diy.jp/2017/01/170130_01/
色数多い一枚絵だと、減色すると何か色欠けてる感が出ることがありますが、小さい立ち絵やグラデ入らないアニメ塗り（色数少ない系画像）の場合は、そんな滅茶苦茶は差が出ないと思います。例をユウちゃんにお願いしましょう。
これは左が356KB、右が109KBです。
見比べるとちょっと瞳の色が減ってますが、画像がもっと小さくて色数少ないと、そこも保たれると思います。
減色することで、一枚で約250KBの差が出るのは大きいですね。差分が10枚になったりすれば、一枚約350KBだと全部で3.5MBになります。6人キャラがいると21MB。これを減色すると一枚約100KBで10枚が1MB、掛けることの6で6MBですから、15MBも削減できます。立ち絵だけで、かなりの削減量です。
ただ上にも書いた通り、色数多いと減色した時に明らかに減色した感が出るので、注意が必要です。
左がフルカラー420KB、右が減色90KB。300KB余り減りますが、これを減色するのはちょっと……となっちゃいますね。ここは綺麗に見せたい、という部分は、フルカラーでも良いと思います。
立ち絵の容量をもっと減らそうとする場合、体・眉・目・口等にパーツを分けて、合成と変更をゲーム側で行うのが一番ですが、これは画像自体がどうこうという話から逸れるので、置いときます。
また、色数少ないドット絵であっても、フルカラーのPNGで出力されてる場合、減色すると容量が減ります。
懐かしのリウェン君。左フルカラー27KB、右減色15KB。
一枚だけだと微々たるものですが、ファイル数が多いと結構減るので、使ってる色数と相談しつつ、減色していくといい感じにコンパクトにできると思います。
画像ファイル減量系ツール・サービス
フリーソフト
- PNGoo：PNG減色圧倒的簡単さ
- Ralpha：色々一括で処理できる、個人的によく使う（窓の杜レビュー）
- Caesium：色々一括で処理できる（k本的に無料ソフト・フリーソフトレビュー）
- Voralent Antelope：色々一括で処理できる（窓の杜レビュー）
- Yukari：パッとアバウトにトリミング・リサイズしたい時便利
WEBサービス
終わり！
とりあえずはそんな感じです。何か足すことあったら足します。
余談
画像周りで参考になりそうな記事。
- レスポンシブ画像について：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=ja
- 画像のダウンロード サイズの縮小（Android）：https://developer.android.com/topic/performance/network-xfer?hl=ja
- グラフィカルコンテンツ（英語）：https://developers.google.com/web/fundamentals/performance/get-started/graphicalcontent-4?hl=ja
- 適切な画像形式（英語）：https://web.dev/choose-the-right-image-format/
- 正しい圧縮レベル（英語）：https://web.dev/compress-images/
英語記事そのままだと読めねえよ！となるので翻訳して読んでます。
可逆とか非可逆とかは自分の頭だと説明できないので、既に説明されているページを読むのが一番分かりやすいと思います。
ほぼみっかプラスのCGとかは、おまけ的なものも含めて183ファイルくらいで30MBくらいです（アバウト計測）。カメラ使う画像は1280*720よりサイズを大きくしていることもあるので、その割には結構軽くできてるんじゃないかと思います。
立ち絵は12人で7MBくらいです。表情多いのが10人くらいですかね。体・眉・目・口・照れ・汗でパーツ分けしてます。