これからはGIFアニメからAPNGの時代に！ iOS 8でサポートされたAPNG画像を使いこなそう

こんにちは、ICS蔵下です。

Safari 8(iOS 8)では様々な機能が新たにサポートされました。WebGLのサポートが印象的ですが本記事ではサポートされた機能の中でもアニメーションするPNG(APNG) を取り上げたいと思います。すぐにでも導入できるのか？とお悩みのみなさまの判断材料の一つになれれば幸いです。

そもそもAPNGって？

Animated Portable Network Graphics 略して APNG。もともとMozillaが提案した規格で、Safari 8(iOS 8)のリリースのタイミングで生まれた規格ではありません。PNG8のように色数を抑えたりPNG32のようにアルファチャンネルを扱うことができます。

最近はアニメーションGIFが主流ですが、色数も限られ透過部分の輪郭にジャギーがついてしまうなど、少々クオリティ面で悩ましいところが多々あります。その悩みを払拭してくれると期待されるのがAPNGです。

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

別画面でデモを再生する

※Firefox、Safari 8(iOS 8)推奨

同じアニメーション素材を素に24fpsでアニメーションGIFとAPNGを作成しました。アニメーションGIFではアニメーションしている要素の周りにジャギーが入ってしまううえに、影の部分がグレーにベタ塗り状態になってしまいます。一方のAPNGは要素の周りにジャギーも入ることなく影も思い通りの透明度を表現できています。サポートされていない環境では1フレーム目が静止画として表示されます。

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

メリットとしては、アルファチャンネルをサポートしているのでアニメーションGIFのようなジャギーの心配もなく思い通りのアニメーションを表現できることではないでしょうか。アニメーションGIFの他にも１フレームを連番のPNGに書き出してJavaScriptでパラパラ漫画のように表現する方法もありますが、APNGとして書き出し(圧縮)することでアニメーション画像のデータ容量・JavaScript実装の工数を省くことができます。デメリットとしては、やはりサポート環境が少ないことでしょう。

APNGのサポート環境

APNGの対応状況。灰色の行が現行版バージョンを、緑色になっているものがAPNGに対応していることを示します。「Can I Use」より

2014年9月現在では、APNGを提案していたMozilla系のFirefox以外ではSafari 8(iOS 8)のみのサポートとなっています。残念ながらその他の環境ではサポートされていません。メリットでも挙げましたが、サポートされていない環境ではAPNGの1フレーム目が静止画として表示されます。

全環境とまではいきませんが、サポートされていない環境でもAPNGのアニメーションを擬似的に表現する方法がありましたので本記事の後半でご紹介します。

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

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

フレームレート

アニメーションGIFはレガシーなブラウザでは表現できるfpsが低く、環境によってアニメーションのスピードが異なることがありました。APNGではAPNG Assemblerで書きだす時にfpsを設定できるので、PCでは60fpsでアニメーションさせることが出来ました。iOS・Androidで動作を確認したのですが、アニメーションGIF・APNGともに動作が重くなってしまい60fpsのアニメーションを実感することはできませんでした。

データ容量

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

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

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

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

Firefox,Safari 8(iOS 8)でしか動作しない、、、と肩を落とすことはありません。全環境とまではいきませんが、JavaScriptライブラリのapng-canvas.jsを使用することで擬似的に表示させることができました。APNGをHTML5のcanvas要素で解析して描画するライブラリですので、canvasをサポートしている環境が対象です。公式サイトではChrome・Safari・IE9〜と記載されていましたが、IE11ではライブラリ内でエラーが発生しており正しく動作させることができませんでした。

別画面でデモを再生する

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

1. APNGを表示させたいHTMLにjQUeryとapng-canvas.jsを見込みます。

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

2. 下記のスクリプトをHTML内または外部のJavaScript内に記述します。こちらの処理でHTML内に記述しているPNG(通常のPNGとAPNG含めて)を取得し処理を行います。

APNG.ifNeeded(function() {
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];
        if (/\.png$/i.test(img.src)) APNG.animateImage(img);
    }
});

最後に

調査する前まではデータ容量がアニメーションGIFに比べて膨大になってしまうのではないかと思っていました。ですが、可逆圧縮で容量を圧縮できるのでアニメーションGIFを使うシーンで導入を検討しても良いのではないでしょうか。ですが、正式にサポートされている環境が少ないので少々思い切りが必要になりそうです。Safari 8(iOS 8)がサポートしたことにより、他の環境も続々とサポートされていく可能性がありますので、今後の動向から目が離せません。