アート

どっち!?GIF、APNG、WebP、Lottieの比較の違い!(AE/アニメ画像に変換する君)

アート

Web上でアニメーションする方法を検討しました。

厳選!お絵描きや創作におすすめな技法書・動画・ソフトウェア

どっち!?GIF、APNG、WebP、Lottieの比較の違い!

特性/フォーマット
GIF
APNG (Animated PNG)
WebP
Lottie (ベクトルベース/SVG)
提供元
CompuServe
PNG Group
Google
Airbnb
ファイルサイズ
大きい
中程度
中程度
小さい
透過サポート
単色の透過のみ
半透明OK
半透明OK
半透明OK
品質
低〜中
高
高
高
プログラミングからの制御
再生・停止、ループ可能
再生・停止、ループ可能
再生・停止、ループ可能
ボタン操作、ループ、シークバー操作などが可能
メリット
サポートが広い、編集が簡単
品質が高い
品質と圧縮率が良い
高度なアニメーション、小さいファイルサイズ、シークバー操作が可能
デメリット
ファイルサイズが大きい、品質が低い
WebPよりサイズが大きい
編集ツールが限られている
特定のAfter Effectsの機能はサポートされていない
採用実績
いろいろ
動くLINEスタンプなど
いろいろ
いろいろ
ライセンス
制限なし
制限なし
制限なし
MIT License
AE(After Effects)からの書き出し
書き出した動画をPhotoshopでgif化できるよう
PNGの連番と書き出し、「アニメ画像に変換する君」を利用
PNGの連番と書き出し、「アニメ画像に変換する君」を利用
Bodymovinプラグインが必要
制作コスト
低
中
中
高

Lottieができないこと!

  1. 一部のエフェクトとプラグイン: After Effectsの多くのサードパーティプラグインや一部のネイティブエフェクトはLottieでサポートされていません。
  2. 3Dレイヤー: Lottieは基本的に2Dアニメーションに特化しているため、3Dレイヤーと3Dエフェクトはサポートされていません。
  3. 複雑なシェイプレイヤーアニメーション: シェイプレイヤーもサポートされていますが、一部の複雑なパスやプロパティは制限があります。
  4. マスクの一部の種類: After Effectsのすべてのマスクタイプやマスクオプション（例：ぼかし）がサポートされているわけではありません。
  5. タイムリマッピング: 一部の高度なタイムリマッピングオプションは、Lottieで再現するのが難しい場合があります。
  6. エクスプレッション: AEのエクスプレッションは、一部はサポートされていますが、全てがサポートされているわけではありません。
  7. キャラクターアニメーション: After Effects内での複雑なキャラクターアニメーション（例：Duikツールなど）は一般的にLottieではサポートされていません。
  8. 高度なテキストアニメーション: テキストレイヤーは基本的にはサポートされていますが、高度なテキストアニメーションは制限があります。
  9. ブレンドモード: すべてのブレンドモードがサポートされているわけではありません。

評判

スポンサーリンク

GIF、APNG、WebP、Lottieの比較!個人的にどれがおすすめなの?

Lottieは作業の複雑性、できないことがある等の理由に採用をみおくり、

半透明したいのなら、APNGかWebPなのだけど、軽量、シェアの関係からWebPかな。予備案としてAPNGをもつか。

スポンサーリンク

AE(After Effects)からPNGの連番をエクスポートする手順

ファイル > 書き出し > レンダーキューに追加

出力モジュール設定

  • 形式：PNGシークエンス
  • チャンネル：RGB + ALPHA(アルファ)

export\webp\PNG-Sequenceと適当にエクスポートするフォルダを作成します。

出力先を決めてレンダリング。

AE(After Effects)のレンダリングでサイズ変更

個人的にYoutubeぐらいで使えるサイズで作ることが多いですが、Webで使う場合はもっと小さくしたいときがあります。サイドバーで使う場合は300pxぐらいにしてもよいでしょう。

何らかの事情でサイズを変更したい場合、

出力モジュール > サイズ変更 > 変更サイズ

カスタム値の設定できます。コンポジットの変更とは違ってレンダリング時に一時的にサイズを変えられるようです。

AE(After Effects)のレンダリングで時間指定

時間を決めたい場合は、レンダリング設定

サンプリング時間の[カスタム]

レンダリング時にワークエリアという選択肢もありました。ワークアリアはエクスポートやプレビュー時の時間をタイムラインで決めておけるものです。

スポンサーリンク

PNGの連番読み込み対応とWebPの書き出しソフトウェア

PhotoshopやAdobe Media EncoderはPNG連番をwebpにできる?

infanviewはPNG連番読み込みができないっぽい

infanviewはwebPはエクスポートできるようだけど、PNGの連番読み込みの対応していないようです。

XnConvertはWebPの書き出しができないっぽい

XnConvertはPNG連番の読み込みはできますが、WebPをアニメーションで書き出せないっぽいです。静止画ならエクスポートできます。

ImageMagickやGIMP、krita

他の選択肢として、コマンドで使うImageMagick、グラフィックソフトのGIMPやkritaがあります。

kritaとアニメ画像に変換する君は試したところ、うまくいきました。

*注)情報が古いものが変わっている可能性があります。

スポンサーリンク

アニメ画像に変換する君の使い方

使い方がみればすぐわかる程度のものなので、テストしたことなどまとめていきます。

アニメ画像に変換する君の容量最適化サイズ

同じアニメーションでテストしてみました。結論からいえば、WebPとAPNGどちらも選べるのなら、WebPの容量最適化ありがよさそうです。zopfliよりWebPの容量最適化ありの方がファイルサイズが少なかったです。

  • WebP容量最適化なし：17541kb
  • WebP容量最適化あり：2637kb
  • APNG zopfli(変換が遅い、Googleが開発)：11515kb 変換に1時間近くかかった…。
  • APNG 7zip(変換が中間)：11692kb 変換に25分ぐらい。
  • APNG zlib(変換が早い)：12733kb 変換は1分ぐらい。

変換中にちょっとWikipediaをのぞいてみました。ZopfliはGoogleだけど異常に時間がかかります。圧縮重視ということでしょう。

Zopfliの出力はzlibの最大圧縮のものより一般的に3 – 8%小さくなるが、圧縮処理には80倍の時間が必要となる

https://ja.wikipedia.org/wiki/Zopfli

7zipは個人的にも昔からよく知っています。1999年からあります。

2007年にSourceForge.netのコミュニティにより「技術デザイン」賞と「ベストプロジェクト」賞に選ばれた

https://ja.wikipedia.org/wiki/7-Zip

ジャン＝ルー・ガイイさんはGoogleに入ったみたいですね。マーク・アドラーさんはカリフォルニア工科大学で働いているみたいです。

zlibの作者は、ジャン＝ルー・ガイイ (Jean-Loup Gailly) とマーク・アドラー (Mark Adler)

https://ja.wikipedia.org/wiki/Zlib

全部C言語かC++で開発されています。

アニメ画像に変換する君以外に、ImageMagickなどがありますけど、これだけ最適化されていればいいかなとまだ試していません。

Web上で使うのならSEOやページ読み込み速度などの問題がありますけど、他の用途なら多少サイズが大きくてもそこまで気にしなくてもよいかもです。むしろ品質重視です。

アニメ画像に変換する君のAPNGエラー

圧縮方式をどれに変更してもエラーがでますね。→ためしにAEで書き出すサイトを横300にしたら書きだせました。横1080はダメでした。apngの拡張子ってただの.pngなんですね。

webPは大きなサイズでも問題なく書き出せました。

シンプルですが使いやすいソフトという気がします。助かりました。

アニメ画像に変換する君のデータ確認

Windowsでirfanviewというソフトを使いました。アルファの抜けも確認できます。

WebPのアニメーションのビューアー・再生(irfanview)
ebookbrain.net

もちろん、Chromeでも再生できますが、アルファの抜けは確認できないようです。

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました