【2023年】GIFアニメに変わる次世代型画像形式APNG導入へ！ #Part.1

皆さん、こんにちはこんばんは。

いかがお過ごしでしょうか、WEBデザイナーの原です！！

「webサイトで動くアニメーション画像を使ったアニメーション表現をしたい！」といった場合、これまではアニメーションGIFが主流となっていました。しかし昨今では、そんなアニメーションGIFに変わる次世代型画像形式「APNG（エーピング）」が注目されています。

従来のGIFは色数が少なく、輪郭のジャギーなどにより画質が低く見えてしまっていました。mp4動画を埋め込んでも、ページ自体が重くなり表示速度が遅くなるといったデメリットがあります。

そんな問題を払拭してくれると期待されているAPNG形式について調査してみたので、

今回はGIFとAPNGの違いや特徴についてご紹介します！

APNG形式とは

『APNG』とは、Animeted Portable Network Graphicsの略称であり、連番のPNG画像をパラパラ漫画のようにアニメーションさせるGIFに変わる次世代の画像形式です。

このAPNGはひとつのファイルに見えますが、ファイルの中に複数の静止画ファイルが格納されています。

APNG再生時はこの格納された連番の静止画ファイルを連続したアニメーションのように表示されます。

APNG形式自体は2004年から存在していたようなのですが、対応しているブラウザがFirefoxだけだったりと長らく不遇の期間が続いていたみたいですね…

しかし2023年現在では、Firefox以外にもChromeやSafariなど対応するブラウザも増えてきました。

現在ではLINEスタンプのアニメーション形式としても使用されており注目を浴びています。

APNGのメリット・デメリット

まず、こちらのサンプル画像でAPNGとGIFを比較してみましょう。

GIF	APNG

アニメーションGIFの方が境界線に白いノイズ（ジャギー）が目立ちますね。

ではなぜこのようになるのかをご説明します！

APNGのメリット

●256色までしか使えないGIFアニメーションに対し、APNGはpngと同じく色数が1677万色（24bit）を使用するためより複雑な色の表現が可能。

●可逆圧縮の特性を持つため、画像が劣化しにくい。

APNGとGIFの比較表

APNGのデメリット

●色数やグラデーションを増やすとファイルサイズが大きくなる。

●2023年現在では一部のブラウザ（IE11）ではサポートされていない。ただし、サポートされていない環境では静止画（PNG画像）として表示される。（参照：「Can I use」）

デメリットの対応策

非対応ブラウザでAPNGを動作させる方法

現状IE11ではサポートされていないAPNGですが、JavaScriptライブラリ「apng-canvas.js」を使用するとIEでもAPNGを擬似的に表示することができます。

APNGをHTML5のcanvas要素で解析して描画するライブラリなので、canvas要素をサポートしているIE９以降のブラウザでも動作します。

導入手順

1.HTMLにapng-canvas.jsを読み込む

2.APNGファイルを読み込むimg要素にclass属性を設定。今回は「apng-image」とします。

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]);
 }
});

APNGの作り方

本記事では詳細なAPNGの作成方法は割愛しますが、大まかな作成方法は以下になります。

1.動画作成ソフトを使用してアニメーションを作成

2.コマ毎にPNG画像で書き出す

3.APNG変換ソフトを使用して書き出したPNG画像を統合する

詳細な作成方法については、次回詳しい作成方法の記事をあげます！！

まとめ

今回はAPNGとGIFを比較してAPNGの導入メソッドなどをご紹介しました！

昨今ではアニメーションを効果的に使用した動きのあるWEBデザインがトレンドになっていますね。

そんな時に今回ご紹介した『APNG』を使用すれば比較的簡単にアニメーションデザインの表現の幅が広がると思いました！

GIFアニメよりも表現力も高く、可逆性圧縮の特徴を持つため容量もGIFとさほど変わりないのでWEBサイトのアニメーションに導入を検討してみてはいかがでしょうか！

次回は、『APNG』の作り方チュートリアルを別途ご紹介しますのでそちらの記事も是非チェックしてください！！

では、ご静聴ありがとうございました！良いアニメーションライフを！！