mimonelu

アニメーション GIF/APNG/WebP デモ

アニメーションする画像フォーマットには GIF の他に APNG ( Animated PNG ) と WebP (ウェッピー )がある。いずれもフルカラーでアルファチャンネルを持ち、アニメーション GIF よりも表現の幅が広い。
APNG は Mozilla によって作成された PNG の拡張フォーマットであり、動く LINE スタンプにも使われている。また、 GIF よりも圧縮効率が良いため、大抵のアニメーション GIF は APNG に変換するとファイルサイズが軽くなると言われている。
WebP は Google によって作成された画像フォーマットであり、そもそもアニメーションを前提としている(静止画の WebP は 1 フレームのアニメーション)。透過してアニメーションもできる JPEG に近い。

各フォーマットの違い

アニメーション GIF

APNG

WebP

作り方

Canvas でアニメーションを作成後、 1 フレームごとに PNG ファイルを書き出し、これらをフォーマットごとにアプリケーションを用いて変換した。