ティラノスクリプトでWebPの可能性

暫くWebPの虜になってました。(ウエッピーと読むらしいです)
サムネイルの軽量化を調べてて、WebPという規格の存在を初めて知りましたがこれは良いですね。

非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなる。
非可逆圧縮でもアルファチャンネルを扱える。
wikipediaより

アルファチャンネルを扱える上にアニメーション対応とか、私にとっては神規格!
ただ、対応ブラウザがChromeのみという点が唯一かつ最大の弱点ですかね…。

ティラノでの表示

  • Windows PC版 … OK!
  • Windows ブラウザ版 … Chrome のみOK!
  • Android アプリ版 … 5.1.1/6.0.1 はOK。4.2.2は透過とアニメ非対応。*1
  • Android ブラウザ版 … Chrome のみOK。 4.2.2以降
  • Mac、iOS版 … 検証環境が無いので未確認。iOSはひと手間必要そう。*2

*1 Android アプリ版は公式サイトの手順で作成しました。
*2 クックパッドアプリはiOSでもWebP表示してるみたいですがよくわからず。参考サイト参照。

ティラノスクリプトのサンプルゲームの画像をgif、jpg含めてwebp(非可逆 90%)化したら、PC上容量で2M程軽くなりました。サンプルゲームの画像数で2Mは結構凄いかも?
ただし、残念画質になってるものや、逆にデータが大きくなってるものもあるので、適正画質にするともう少し差は少ないと思われます。

公開対象を限定するなら、WebPは軽くて綺麗なので、画像フォーマットの選択肢に含めてもいいかなと思います。

尚、WebP以外のファイルサイズ軽量化についてはWikiを参照ください。
アップロードまとめ

画質・サイズ

検証しつつ気になった事。

  • グラデーションは苦手なようで、サンプルゲームの title.png は100%でも微妙にラインが出来る。グラデ画像はロスレスモードがいいかも。
  • 写真なら80~70くらいの圧縮でも使用に耐えれそうですが、アニメ絵だと85~100くらいが限界かなと感じました。
  • 色数が少ないなど画像によっては元画像よりデータが大きくなってしまう場合がある。
  • 非可逆圧縮だと若干色味が変わる。特に赤が苦手っぽい。
  • ロスレスと非可逆でquality値の使い方が違うっぽい。ロスレス 0 > 100、非可逆 100 > 0
  • 非可逆よりロスレスの方が大きいという訳でもないので、慣れるまでちょっと大変かも。たぶん画像による。

圧縮方法とサイズ比較。

もっと参考になりそうな画像はなかったのか・・・。

PNG
PNG 13.5 KB
Jpeg 100%
Jpeg 100% 67.4 KB
Jpeg 75%
Jpeg 75% 33.0 KB
Jpeg 50%
Jpeg 50% 18.5 KB

Webp_logo
Webp Lossless 0% 13.3 KB
Webp_logo
WebP Lossless 50% 9.35 KB
Webp_logo
Webp 75% 9.09 KB
Webp_logo
WebP Lossless 100% 9.00 KB

Webp_logo
Webp 100% 13.5 KB
Webp_logo
WebP 75% 9.14 KB
Webp_logo
WebP 50% 7.04 KB
Webp_logo
WebP 25% 4.92 KB

WebP作成ツール

手軽なWEBサービスもあるけど、非可逆 75% 固定っぽい場合が多く、ゲーム素材用としては使いにくい。

  • MediBangPaint Pro(Win/Mac)
    日本語対応なので使いやすいです。可逆・非可逆選べて画質指定も可能です。
  • WebPconv(Win)
    英語ですが、複数ファイルを一気に変換出来るのでとても便利です。gifアニメもWebPアニメにしてくれる。
  • アニメ画像に変換する君(Win/Mac)
    WebPアニメを作れます。フレームレートは均一設定しかできません。容量最適化は75%固定のようです。お手軽。
  • Honeycam(Win/有料)
    フレーム毎にフレームレート設定も出来るしとても使いやすい。無料版には製品名が入ります。
  • ffmpeg
    黒い画面でコマンド使う方法です。アニメも作れるらしいけどよくわからない・・・。

参考サイト

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です