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

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

フレームレートの違い

APNG Assemblerでのfps設定方法

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

データ容量

APNG Assemblerでは、zlib・7zip・Zopfliと3種類の圧縮形式を選択できますが、今回は最も圧縮率の高いZopfliで書き出しました。

  • Zopfli(APNG) : 379KB
  • アニメーションGIF : 337KB

※デモで作成した各画像のデータです。

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

サポートされていない環境でAPNGを動作させる方法

Chrome、Firefox、Safariでしか動作しない、、、と肩を落とすことはありません。全ブラウザーとまではいきませんが、JavaScriptライブラリ「apng-canvas.js」を使用すると擬似的に表示できます。APNGをHTML5のcanvas要素で解析して描画するライブラリですので、canvas要素をサポートしているブラウザー(IE9〜)で動作します。

次の手順で導入できます。

1. HTMLにapng-canvas.jsを読み込むscript要素を記述します。

<script src="apng-canvas.min.js"></script>

2. APNGファイルを読み込むimg要素にclass属性を設定します。ここではpng-imageを設定しました。

<img class="apng-image" src="../images/elephant_apng_zopfli.png" />

3. 以下のスクリプトをHTML内または外部のJavaScript内に記述します。このスクリプトでは、APNGを取得してcanvas要素に描画する処理を行っています。

APNG.ifNeeded().then(function () {
  var images = document.querySelectorAll(".apng-image");
  for (var i = 0; i < images.length; i++){
    APNG.animateImage(images[i]);
  }
});

最後に

調査する前まではデータ容量がアニメーションGIFに比べて膨大になってしまうのではないかと思っていました。可逆圧縮の選択肢があり容量の圧縮が可能なので、アニメーションGIFを使うシーンで導入を検討しても良いかもしれません。

APNGファイルを取り巻く状況は、Apple Safariが2014年9月のiOS 8/Safari 8からサポートしたことや、Google Chromeが2017年6月のChrome 59からサポートしたことで大きく前進しています。

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

LINEのアニメーションスタンプがAPNGで作れるようになります!

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