見出し画像

オンラインセッションのための超マニアックな画像圧縮<特別回>手っ取り早くPNGを軽くしたい人の為の虎の巻

ココフォリアで1MB以上の画像がアップできなくなる…?!

以前こんな記事を書いてから早1年。この記事以降は本当に気の向くまま、細かい仕様も含めて丁寧に丁寧に解説していこうと思っていたのですが、そんな事は言っていられなくなりそうなので急遽筆をとりました。

きっかけは8/29、ココフォリア公式さんからの以下のようなアナウンスです。

>今後のアップデートで1mb以上の画像についてのアップロードを一部制限させていただく可能性がございます。

まだ可能性ではあるのですが、ココフォリアへの負荷軽減のためにも軽い画像を用意できたほうがサーバーにも 優しいというもの。
そこで今回は、手っ取り早くPNG画像を軽くする方法に絞っての手法を紹介いたします!

①無劣化編 あとほんの少し…を解消したい時用

画像の圧縮って、どうしても劣化を伴うことが多いもの。
できる限り劣化なく、元の画像と同じ見た目で保存したいでしょうが、そんなうまい話が…なんと、あります。
本記事では詳細の説明は省くのですが、PNGには「画像内部の圧縮率を変える」オプションがあります。(簡単に言えば、画像の内部でzip圧縮をするようなものです)
しかし、このオプションに対応しているイラストソフトはあまり多くありません。

そのため、いくつかの圧縮ツールを通すだけで、なんと全く劣化なく容量を軽くすることができるのです。
(とはいえ、保存に少し時間はかかるのですが…)

ツールその1:PNGGauntlet

こちらは無劣化圧縮ツールの一つ。ツールをダウンロードし、PNGファイルをドラッグ&ドロップして「Optimize!」ボタンを押すだけで、簡単に画像を圧縮することができます。

このサンプルでは14%の削減に成功

複数のファイルをまとめて処理することもできるのでおすすめです。
ただし、こちらのツールはAPNGに対応していません

ツールその2:RealWorld Paint

APNG対応ソフトならこちらのツールがおすすめ。
圧縮専用のツールではないのですが、圧縮したいAPNG画像を開き、保存時に「最大圧縮」を選択して保存し直すだけで、APNGも高い圧縮率で保存することができます。
さらにこのツールは直接アニメーションを編集することもできるので、後述する「フレームレートの削減」などの編集にも便利です。

②劣化圧縮編 些細な見た目の変化なら問題ない人向け

圧縮率を変えるだけの容量削減には限界があります。
そのため、ここからは劣化を伴う減量を行っていくことになるでしょう。
PNG画像を軽量化するには、画像の減色等を行っていく必要がありますが、一つ一つ細かな修正を加えていくのは手間がかかります。
そのため、このノートでは画像をアップロードするだけで簡単に処理してくれるオンラインツールの使用をおすすめします。

ツールその3:Tinify(TinyPNG)

APNGにも対応した画像圧縮サイトです。アップロードした画像を自動で圧縮し、見た目には劣化が目立ちにくい圧縮画像に変えてくれます。
場合によっては80%ほどの軽量化を行ってくれることもあり、容量削減にはもってこいです。
ただし細かな設定はできないため、どうしてもここだけ劣化させたくない…といった処理は困難かと思います。
また、サーバーを介して処理するので、セキュリティやプライバシー上の懸念がある人には向かないかもしれません。

ツールその4:squoosh

というわけで、こちらはオフラインでも動作する、Googleが作成した圧縮サイトです。画像をローカルで処理するためサーバーに上げないので安心。色数など、ある程度の設定調整も可能です。
ただしこちらはAPNGには対応していません。

8/31 11時追記 ココフォリア公式圧縮ツールが…!

…とこんなことを描いていたら、なんとココフォリア開発のめうさんが公式の画像圧縮ツールを提供してくださいました…!えっ令和に画像圧縮ツールをこの短時間で?仕事が早すぎる…
こちらもTinifyと同じく細かい設定は出来ませんが、APNG対応でかなりの効率で圧縮してくれる上にブラウザ上で処理してくれるようです。よほどこだわりがない限りこれを使うのが良いかも。

追記2・
このあと少し検証してみたのですが、ココフォリアの画像圧縮は解像度が高い画像も自動でリサイズする処理などが入っているようです。具体的には、縦横の最大サイズが1200pxまでとなり、それに合わせて自動で縮小が行われます。

また、減色時の補間処理なども異なり、TinyPNGが「ディザリング(グラデーションなどを細かいドット状のタイルで補完)」するのに対し、ココフォリアではディザリングなし(より軽量だが色差が目立つ場合がある)で補間しているようです。
TinyPNGの方も「5MB以上の画像の処理は有料」などの制限があるので、用途によって好みのものを使い分けるのが良いかと思います。

③上級者向け:フレームレート低下編 多少カクついても問題ない人向け

こちらはAPNG用の画像編集方法です。そもそもAPNG画像は、「複数の画像をパラパラ漫画のように組み合わせた画像」になっています。
そのため、どんなに容量を落とそうと、「内部の画像の数が多ければ圧縮にも限度がある」のです。
そのため、「内部の画像を間引く」ことで容量を軽くすることができます。

基本的には、アニメーション作成ソフトの側で「フレームレート(1秒間に何枚の画像が表示されるか)」の設定を「30」から「10」などに変更するだけでいいのですが…

特定の変化が少ないコマのみ間引きたい場合、先程紹介した「RealWorld Paint」などで処理することが出来ます。

例えば以下の画像では、「動きにほとんど変化がないフレームを大幅に削り、その部分の表示秒数を変更する(点線囲い部分)」ことで大幅に画像の枚数を削減しています。

基本的には1枚100ミリ秒で表示する画像を1枚だけ5000ミリ秒に変更

ここまで複雑なことをしなくとも、例えば1枚おきに画像を削除して、表示する秒数を2倍にする等の処理を行って枚数を減らすことで、容量を減らすことができるでしょう。

アニメーション編集ソフトを使えない場合は…

ツールその5 APNG Disassembler

こちらはAPNGを「バラバラの複数の画像に分解するソフト」、そして……

ツールその6 APNG Assembler

こちらは「バラバラの複数の画像を組み合わせてAPNGにするソフト」です。
画像に直接手を加えたい場合はこれらのツールなどを使い画像を分解、再構築しながら1枚1枚編集できます。

ただし、ここまで来ると中々の手間と、ある程度のアニメーションの知識が必要になるでしょう。

番外編1:基本的な設定を見直そう

さて、ここまでに容量の削減方法を3つ紹介しましたが、これらを駆使しても中々サイズダウンしづらい素材もあるでしょう。
その場合、基本的な設定を見直しましょう。

例えば、「解像度は高いほどいい」と思っていませんか?
ココフォリアではマウスホイールを動かし盤面を拡大することが出来ますが、最大サイズは基本的には「200%」までです。
どんなに高い解像度で書いたところで、基本的には「画面の最大サイズ」以下に縮小されるため、それ以上の解像度はほとんど意味がありません
むしろブラウザの機能で機械的に縮小されるため、かえって粗く見えてしまうことすらあるかもしれません。

一般的なモニター画面の解像度は「1920×1080ピクセル」程度ですし、ココフォリア上にはせいぜいその半分のサイズでしか設置しないので、基本的には「960×540」あれば十分です。どうしても解像度を上げたい場合も、その2倍までに留めるべきでしょう。

番外編2:WebPは使うべき?

ここではPNGの圧縮方法について紹介しましたが、これほど複雑な処理を行わなくとも、フォーマットを「WebP」形式に変更するだけで、より軽量で劣化の少ない画像に変換することが出来ます。
対応ブラウザがやや少ないのが欠点ですが、とはいえ現在ではよほど特殊なブラウザや古いブラウザを使わない限りはWebPに対応しているので、こちらを使うのも手なのですが……

https://docs.ccfolia.com/pl-tutorial/character-edit/basic#set-images より引用

なんと、ココフォリアが正式にはWebPに対応していません。
アップロードはできるので使えてしまうのですが、公式に対応していないということは運営上のサポートが受けられない可能性があります。
また、今回のように仕様変更の影響を受ける可能性もないとは言い切れないので、使用は自己責任で、といった範囲になるかと思います。

【PR】
ここまでたっぷりノウハウをお届けしたのですが、この記事を書いたところで朱石にあまり旨味はないので最後に宣伝だけさせていただきます。
弊サークル「朱石アナログ屋」では、もともと1MBに抑えたAPNG素材を多数取り揃えております!なんと無料版もあります。
わざわざ圧縮せずともすぐに使えるので、是非お試しください。

https://akasitrpg.booth.pm/


いいなと思ったら応援しよう!