アニメーションにおけるGIF、APNG、WebPの比較とオススメの紹介

GIFもAPNGもWebPも、アニメーション画像に対応したファイルフォーマットです。

「アニメーション画像はどれが一番いいの？」

クリスタでうごくイラストを書き出すときなど、どの拡張子（ファイル形式）にすればいいか迷いますよね。

本記事では、GIF、APNG、WebPの違いや比較から、どれがオススメなのかを紹介していきます！

また最後にはアニメーション画像と動画の違いにも触れていますので、ぜひ最後までご覧ください。

GIFはどこでも使える

GIF（ジフ）はインターネット黎明期からある拡張子で、画像とアニメーション画像どちらにも対応しています。

ウェブサイト上で動いているキャラクターや広告などは、一昔前まではほぼGIFでした。
昔から広く使われてきているため、GIFが非対応なんてことはほぼないのというのが強みです。

軽い上に透過にも対応していますが、デメリットもあります。

使える色が少ないので、繊細な色使いのアニメーションや実写などはどうしても画質が落ちてしまいます。

APNGは画質重視

APNG（エーピング）はPNGを拡張して開発された、アニメーションをするPNG画像です。

Microsoft Edgeでは2020年にようやく対応するなど、APNGはまだ発展途上の拡張子です。

自分の使いたい場所がAPNGに対応しているか確認する必要はありますが、クオリティを重視するときにオススメです。

WebPはウェブに最適

WebP（ウェッピー）は2010年にGoogleが開発した拡張子で、画像とアニメーション画像どちらにも対応しています。

クオリティを落とさずにファイルサイズを圧縮することに特化しているので、軽くてキレイです。

ほとんど気にならないのですが画質はAPNGに軍配が上がります。
またファイルサイズも小さいのですが、GIFほど軽くはありません。

比較的新しい拡張子なので、まだAPNGと同じくどこでも使えるというわけではありません。

ただコスパに優れているので今後主流になっていくと思います。

それぞれを比較してみよう！

ここまで紹介した3つの拡張子を比較していきましょう！

	GIF	APNG	WebP
色数	△ 256色	◯ 1677万色	◯ 1677万色
透過	△ 半透明非対応	◯	◯
画質	△	◎	◯
対応環境	◎	△ 発展途上	△ 発展途上
ファイルサイズ	◎	△	◯

比較ができたところで、どれにするべきでしょうか？

どれがオススメ？

ズバリ「まだGIFが汎用的」というのが結論です！

主要なブラウザには対応しているのですが、現状まだAPNGとWebPはサポートしていないサービスが多くあります。

画質を重視するならアニメーション動画をアップしたいサービスがAPNGやWebPに対応しているか確認してからアップするという形になります。

それぞれに違ったメリット・デメリットがあるので棲み分けや使い分けをしていくことになると思いますが、それらが手間に感じるのであれば何も考えずにGIFにするのが楽です。

また画質やクオリティにとことんこだわりたいなら、もはやアニメーション画像ではなく動画という選択肢も出てきます。

MP4などの動画ファイルとの違いについて

以上、GIFとAPNGとWebPの比較でした！

最後に、動画にはMP4やAVI、MOVといった専用の拡張子があります。

「アニメーション画像って動画ファイルと何が違うの？」

アニメーション画像も動画であることには変わりないのですが、これらはどう違うのでしょうか？

アニメーション画像も動くという点では動画と言えます。
が、システム上では「画像」として扱われます。

そのため動画には当たり前のようにある「音」もなければ「再生ボタン」や「一時停止ボタン」もなく、アニメーション画像は勝手に動いています。

逆に言うと、音をつけたいならアニメーション画像ではなく動画にしなければいけないということです。

そのため

「アニメーション画像を動画として扱いたい！」
「動画の中にアニメーション画像を組み込みたい！」

こんなときはアニメーション画像ではなく、MP4など動画形式で書き出す必要があります。

自分が「どこで」「どんな目的で」「どのように」見せたいのか、これらを踏まえて最適な拡張子を選んでいきましょう！