我流ココフォリア立ち絵軽量処理【2024年版】
始めに
ココフォリアでwebp処理するより効果的なアプローチあるだろ～！？！？
等、色々みたので、もうちょい手間かけてもいい人向けに、実際に私が行っている軽量化手順をまとめておきます。
我流ですのであしからず。
流れ
①絵を2016×2016ピクセルのキャンバスに格納する
【コラム：なんでこのサイズなのさ～！】
②透過ピクセルを減らす
【コラム：PNG圧縮ってどうなん？】
③Webp化する
コラムは読み飛ばして大丈夫です。
詳細
①絵を2160×2160ピクセルのキャンバスに格納する
まずは最強の絵を用意してpng出力。
新規に2160×2160ピクセルのキャンバスを用意、そこにいい感じに格納します。
画像が小さくなれば、それを管理するためのビット数が二乗で減っていくので効果が非常に高いです。
試しにこの立ち絵、12000×12000を2016×2016に変えた結果
38.7MBが1.91MBまで減りました（検証中、数字を間違えました…）。
注釈)
これは絶対高画質は譲れない向け人サイズです。
立ち絵をフルスクリーンぎりぎりまでいっぱいにして設置する事ないやろ！って思われた方、全面的にその通りです。
そういう方にお勧めなのは、1440*1440。
拡大しても私は劣化をそんなに感じない…。
私個人は、動く立ち絵を720*720で作るくらいです。
動いてると拡大しないとわからないくらいの画質の劣化は気にならないので。
ちなみによく利用されているピクルー君は600×600。ピクルー君で問題を感じてないならこのサイズで問題ねぇ！
【コラム：なんでこのサイズなのさ～！】
もっとも一般的なPCのディスプレイ解像度は、1920×1080(フルHD)。
これは、ディスプレイを表示するとき、横に1920、縦に1080、ドット(ピクセル)を並べて表示してるんだよ、みたいな話です。
つまり、拡大がなければ、1920×1080あれば十分なピクセル数の画像になります。
ただ、ココフォリア君には、二倍まで拡大する機能がついてるからそれに対応しないといけません。とすると、縦は×２で2160ピクセル。
そして、絵をスクリーンパネル等で扱う可能性がある場合、比率を絶対変えたくない、とすると、1:1の比率が一番管理しやすいので、横幅も同様に設定。
そこにこだわりがなければ、横幅は絵が収まるぎりぎりのピクセル数にしておくのが最も軽い上に、あ！ごめん！絵動かしちゃった！の事故が減ります。
当然、4K(3840×2160)対応させるとかipad（1640×2360）を基準にします！と言うと適切なサイズが変わります。(とはいえ、4Kの縦2160って同じ数値なわけで、画面いっぱいに表示しない限り、4Kの拡大にも耐えうるサイズだと思いますけどね…マジで高画質を譲れない人用サイズです、あらゆる意味で。)
気になる方は卓メンバーに確認しておくとよいかも。
②透過ピクセルを減らす
透明でなくてもいいよ！って方は、半透明部分を不透明にかえておくと、webpに変換した時、さらなるbit数削減を見込めます。
pngの透過処理は非常に優秀なので、pngをそのままココフォリアで使う場合はこの処理はするメリットがあまりないかもしれません。
とはいえアルファチャンネルが単純になるのはpngにとっても軽量化につながります。
1.91MBが1.86MBに変わりました。
【コラム：PNG圧縮ってどうなん？】
結論を言うと、絵師の皆様におかれてはやめておく方が無難でしょう。
基本的に出回っている一般的な圧縮の多くが、表現できる色の数を減らすことでサイズを小さくしています。
例えば、ビットの深さが32bitであれば16,777,216色を表現できるのに対し、8bitになると、256色まで色の数が減ってしまいます。
まだ、クリスタのイラスト調加工等を使い、色の階調数をプレビューで確認しながら減らすほうが現実的なのではないでしょうか。
なお、これは、絵や色にこだわる絵師・イラストレーター・グラフィックデザイナーならば、という話です。
ぱっと見の印象さえ変わらなければ問題ないという方には適応されないので、試してみるのもよいかと思います。
例外的に、台風に利用されていることで有名なwavelet変換というものがあり、詳細がやや抜け落ちるものの、ほぼ変わらず再現できる技術であるという事を認識はしています。が、まず個人で卓する上で実用的な技術ではないと私は考えます。このあたりについて詳細を説明できる方はぜひnoteにまとめていただければ嬉しく思います。現段階でこのあたりの論文を拝読する等していないので非常に助かります。
（筆者は周波数にすることで値ごとにパターン化して複数ファイルを作り、組み合わせる手法である事しか理解しておりません。）
③Webp化する
最後に以前紹介したwebp化をいたします。
詳細な説明ができるほどの知識がありませんが、webpは色の数と半透明な色が多いほどサイズが大きくなります。ただ、複雑なパターンの色を配置することはpngより得意、みたいなイメージ。
なので単色塗りつぶし、もしかするとグラデーションなんかもpngファイルの方が軽くなると思われます。pngは規則性のある塗りが得意。
（WebpはRGB形式で複数の色の組み合わせで色を表現するのではなく、使う色、全てをカラーパレットとして用意する（透過は透過度によって全て別色としてあつかう）みたいな処理してるんじゃないかとは思うんですが、今の所、資料がみつかっておらず、理解が違う可能性はあります。）
このあたりについての有権者の方の補足は常にお待ちしております。
できれば、参考資料も明記していただけると、より有り難く思います。
いずれせよ、この処理により、1.86MBから106KBにすることができました。
これでもう部屋がかくつく原因とはなりえないバイト数となりましたね。
…え？面倒？
しょうがないなぁ。
このサイト開いて
gift→画像作成所→ファイル選択→立ち絵作成で、できたファイルをココフォリアにつっこめば、半透過処理をしていない事と個人的おすすめサイズの1440×1440を採用してる事以外同様に処理されたファイルが作成されるよ🤗
形式はsvgですが、内容はWebpとほぼ同一なので、気にしないでもらって大丈夫。
【2024/9/1 ようやく動作が安定しました～！ここまで試されてた方、実にすみません…。】
前回記事
お願い
こんなマニアックな補足まで入れた上、スクリプトまで自サイトに設置して、無報酬でやってられるか～～～案件すぎるので、
いいねや、フォロー、できれば商品購入、何卒よろしくお願いします！
店:
この記事が気に入ったらサポートをしてみませんか？