アニメーションする画像フォーマットには GIF の他に APNG ( Animated PNG ) と WebP (ウェッピー )がある。いずれもフルカラーでアルファチャンネルを持ち、アニメーション GIF よりも表現の幅が広い。
APNG は Mozilla によって作成された PNG の拡張フォーマットであり、動く LINE スタンプにも使われている。また、 GIF よりも圧縮効率が良いため、大抵のアニメーション GIF は APNG に変換するとファイルサイズが軽くなると言われている。
WebP は Google によって作成された画像フォーマットであり、そもそもアニメーションを前提としている(静止画の WebP は 1 フレームのアニメーション)。透過してアニメーションもできる JPEG に近い。
各フォーマットの違い
アニメーション GIF
- 256 色まで
- アルファチャンネルなし(完全な透明か完全な不透明かのいずれかのみ)
- 可逆圧縮
- 全環境で対応
APNG
- フルカラー
- アルファチャンネルあり
- 可逆圧縮
-
Android と IE を除く環境で対応
※ APNG 未対応のブラウザでは単に静止した状態で表示されるが、専用のフォールバックライブラリ( apng-canvas.js など)を利用することでアニメーションさせることができる(この場合は Canvas が使用される)。
WebP
- フルカラー
- アルファチャンネルあり
- 非可逆圧縮
- 対応環境は Android と Chrome のみ
作り方
Canvas でアニメーションを作成後、 1 フレームごとに PNG ファイルを書き出し、これらをフォーマットごとにアプリケーションを用いて変換した。
- アニメーション GIF は PicGIF Lite を使って作成した。
- APNG は APNGb を使って作成したが、一般的には Adobe Animate で作成する模様。
- WebP は Animatrice を使って作成した。