イラストのファイルサイズを検証！塗り方でどう変わる？

こんにちは、slashです。
画像などコンテンツのファイルサイズは
小さく抑えられるなら抑えた方が良いですよね。

以前には、画像を圧縮する事で
容量を抑える方法を書きました。

今回はイラストの塗り方で
ファイルサイズがどの程度変わるか
実際に調べてみました。

検証

こちらの線画で検証してみます。

横幅313ピクセル、高さ612ピクセルの線画です。
さて、これが塗り方だけで
ファイルサイズはどう変わるでしょうか？

アニメ塗りの特徴は
色の境目がクッキリした
ベタ塗りがメインになる事です。

PNG形式で出力したら容量は109KBでした。
この109KBという数字が比較検証の
基準になります。

こちらもアニメ塗りです。
先程のアニメ塗り画像に
全体的にグラデーションを付けました。
少しだけ立体感が出たような出てないような（汗

上手くできたかどうかは置いといて
先程の絵よりはちょっと手が込んでいます。

PNG形式で出力したら容量は131KBでした。
軽くグラデーションを加えただけで
ファイルサイズが2割ほど増えてしまいました。

検証2の画像の塗り方を
ちょっと変えてみました。
クリスタの「エアブラシ」や「塗り＆なじませ」などを使って
ちょっと手を加えてみた塗り方です。
アニメ塗りに比べると
色の境目がぼやけた箇所が多く、
ちょっと印象も違ってきますね。

さて、
これまた上手いかどうかは置いといて（汗
アニメ塗りよりも全体的に
手が込んだ塗り方になりました。
（これを何塗りと呼ぶのか
自分でもよくわかりませんが・・・）

PNG形式で出力したら容量は142KBでした。
さらにサイズが増えましたね。

検証1　アニメ塗り：109KB
検証2　アニメ塗り＋グラデーション：131KB
検証3　色の境目がクッキリしない塗り方：142KB

アニメ塗りは基本がベタ塗りであるため、
少ない色数で表現ができます。
つまり、使用する色数は少なくなりやすいです。
塗りがシンプルなだけに
他の塗り方のような繊細な表現がしにくいですが
ファイルサイズは小さくしやすいわけですね。

検証2でアニメ塗りの絵に
ちょっとグラデーションを加えたら
ファイルサイズが2割ほど増えましたが、
グラデーションを表現するには
色数が多く必要になるためかと思われます。

ベタ塗りが中心となるアニメ塗りではなく、
他の塗り方に変えると
それも色数が増える要因になるので
ファイルサイズの増加につながるものと思われます。

PNGooなどのPNG画像圧縮ソフトは
使用する色数を減らす事で
ファイルサイズを減らしていますが、
元々の画像データの色数が多すぎると
圧縮した時に画像の劣化が目立つ場合があります。

先程の検証3をPNGooで
最も品質重視で画像の劣化が少ない
256色設定で圧縮すると、
サイズは142KB→39KBと大幅減となります。

ぱっと見では圧縮前との違いが
わかりづらいかもしれませんが、
よく見るとグラデーションの表現が
荒くなっており画像は劣化しています。

色数の多すぎるPNG画像は
キレイに圧縮するのは難しいので
場合によってはJPG形式などで
出力した方がキレイで
サイズも抑えられるかもしれません。

イラストの品質を保ったまま
圧縮するのが難しい場合は、

・品質を優先して、圧縮を諦める（または圧縮の程度を弱める）
・品質が劣化するのを覚悟の上で圧縮する

どちらかを迫られる事になります。
どちらが適切かはケースバイケースなので
一概にどちらを取るべきとは決められません。

私の場合ですと、
RPGアツマールなどで公開する
自作ゲーム用にイラストを描いたりしますが、
イラストのファイルサイズが大きいままアップすると
それだけゲームの読み込みは遅くなり、
プレイの快適さを損なう要因になるので、
品質が劣化するのを覚悟の上で圧縮しています。

また、このブログで使うPNG画像も
どちらかといえば品質より軽さを
重視して圧縮する事が多いです。
PNGでどうしても圧縮がうまくできないなら
JPG形式を使う場合もあります。

グラデーションなど
多くの色数が必要になる表現を使えば
それだけファイルサイズの増加につながります。

逆に、アニメ塗りのような
少ない色で表現できる塗り方であれば
サイズは抑えやすくなります。

結局のところ、
繊細で複雑な表現をしようとすれば
それ相応に情報量が必要になるので
ファイルサイズも大きく
なってしまうという事ですね。