APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。

データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗

上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitはフルカラーに加えアルファチャンネルもサポートしているため見た目も劣化なくきれいです。さらに可逆圧縮で圧縮されるためPNG連番画像に比べてかなりデータ容量を圧縮できます。

• サンプルを別ウインドウで開く
• コードを確認する

同じアニメ素材をアニメーションGIFとAPNGとで作成しました。アニメーションGIFでは画像の周りにジャギーが入ってしまううえに、影の部分がグレーにベタ塗り状態になってしまいます。一方のAPNGは要素の周りにジャギーも入ることなく影も思い通りの透明度を表現できています。

導入するメリット・デメリット

メリット

1. アルファチャンネルもサポートされるので思い通りのアニメーションを表現できる
2. 可逆圧縮なので劣化なくデータ容量を圧縮できる
3. 連番で書きだした画像の総データ容量よりも圧縮できる
4. サポートされていない環境でも1フレーム目を静止画で表示できる

デメリット

1. アニメーションGIFと比べてデータ容量が大きい

APNGのメリットとしては、アルファチャンネルをサポートしているのでアニメーションGIFのようなジャギーの心配もなく思い通りのアニメーションを表現できることです。

APNGとアニメーションGIFとの比較

APNGとアニメーションGIFの表現の差はデモでも明らかですが、表現以外にもどのような違いがあるのかフレームレート・データ容量の2つの視点で比較しました。

フレームレートの違い

アニメーションGIFはレガシーなブラウザでは表現できるフレームレートが低く、環境によってアニメーションのスピードが異なります。APNGでは変換ソフト「APNG Assembler」で書きだす時にフレームレートを設定できるので、デスクトップブラウザでは60fpsでアニメーションさせることができます。ただし、スマートフォンのiOS・AndroidではアニメーションGIFとAPNGともに動作が重くなってしまい60fpsのアニメーションを実感できませんでした。

データ容量

画像の種類によってはデータ容量が大きくならない場合があります。本記事の検証では以下の通りになりました。

• APNG ： 379KB
• アニメーションGIF ： 337KB

※APNG Assemblerでは、zlib・7zip・Zopfliと3種類の圧縮形式を選択できますが、今回はもっとも圧縮率の高いZopfliで書き出しました。デモで作成した各画像のデータです。

APNGは可逆圧縮のため、画質が劣化しません。アニメーションGIFと比べ42KBほどデータ容量が大きくなりましたが、アルファチャンネル・フルカラーに対応していることを考えると、そこまで膨大なデータ容量ではないと感じました。ちなみに連番画像（PNGで34枚）ですと合計で2.4MBほどになりました。アルファチャンネル部分や色数が増えると差が開いていく可能性があります。

使い分け

WebPとAPNG

ウェブでアニメーションとして利用できる画像形式に、「WebPウェッピー」があります。APNGとおなじくフルカラーで透過チャンネルを利用できます。

APNGの圧縮方式は可逆圧縮（劣化しない圧縮）のみですが、WebPは可逆圧縮と非可逆圧縮（劣化するが容量を削減できる）を選べます。

APNGもWebPも作り方は同じなので、以下のツールを利用して変換します。

• APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース

動画とAPNG

APNGは長尺や色数が多いアニメーションの場合ファイルサイズが大きくなりがちな一方、透過した短いアニメーションをループしたいときは便利です。動画はvideo要素で配置すると再生・停止などのコントロールを標準で利用でき、音声もあつかえます。

APNGはアニメーションするアイコンやスタンプのような小さいUIパーツに使い、動画は再生時間が長くコントロールしたい場合に使うのがよいでしょう。

透過した動画をあつかいたい場合は記事『ウェブサイトに透過動画を埋め込む方法』をご確認ください。

対応ブラウザ

APNG形式は、Chrome 59（2017年6月）、Edge 79（2020年1月）、Safari 8（2014年10月）、Firefox 3（2008年1月）以上で利用可能です。

参照：Can I use…

最後に

可逆圧縮の選択肢があり容量の圧縮が可能なので、アニメーションGIFを使うシーンで導入を検討しても良いかもしれません。

APNGの作り方について「ウェブ用アニメーションを劣化なく保存できる画像形式APNGの作り方」という記事でご紹介していますので合わせてご覧いただけますと幸いです。

LINEのアニメーションスタンプがAPNGで作れます

LINEは2016年6月に「LINE Creators Marketでもアニメーションスタンプが販売できるようになる」と発表しました。「アニメーションスタンプ製作ガイドライン」に沿ったAPNGファイルの作成方法を記事「LINEのアニメーションスタンプはこう作る！ APNGファイルの作り方を徹底解説」にてまとめましたので、あわせてご覧ください。