GIFアニメからAPNGの時代に! 次世代画像形式APNGを使いこなそう

GIFアニメからAPNGの時代に! 次世代画像形式APNGを使いこなそう

※この記事が公開されたのは1年11ヶ月前ですが、 2016年6月17日に内容をメンテナンスしています。

APNG(エーピング)とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、Webサイトでのアニメーション表現に利用できます。従来よりアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなどクオリティ面で悩ましいところが多々あります。その悩みを払拭してくれると期待されるのがAPNG形式です。

※APNGの作り方については、記事「アニメーションを劣化なく保存できる画像形式APNGの作り方」で解説してます。

※LINEアニメーションスタンプの作り方については、記事「LINEのアニメーションスタンプはこう作る! APNGファイルの作り方を徹底解説」で解説してます。

データ容量・データ品質で比較したマトリクス

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

※APNGに対応しているブラウザFirefox、Safariでご覧ください

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

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

APNGの導入に対するメリット・デメリット メリット ・アルファチャンネルもサポートされるので思い通りのアニメーションを表現できる ・可逆圧縮なので劣化なくデータ容量を圧縮できる ・連番で書きだした画像の総データ容量よりも圧縮できる ・サポートされていない環境でも1フレーム目を静止画で表示できる デメリット ・サポート環境が少ない ・アニメーションGIFと比べてデータ容量が大きい

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

APNGのサポート環境

2016年6月現在では、MozillaのFirefoxとApple Safari (Safari 8/iOS 8以上)のみがAPNG形式をサポートしています。残念ながら、その他のブラウザーではサポートされていません。ただし、サポートされていない環境ではAPNGの1フレーム目が静止画として表示されます。

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


     最新記事の一覧へ 
公開 / 更新
蔵下 まさゆき

蔵下 まさゆき

インタラクションデザイナーとして、Webサイトやスマートフォンアプリの開発に携わる。学生時代より学んできた電子技術を活かし、デジタルコンテンツとハードウェアを組み合わせた新たな表現方法の研究開発に取り組んでいる。研究開発で得た知識や最新のガジェット情報などは、Twitterや勉強会などで積極的に発信中。著書に「センサーでなんでもできる おもしろまじめ電子工作」がある。