APNGとは？GIFとの違いや簡単な作り方をご紹介

Web上で使うアニメーションを作成するには、GIF形式が有名ですが、近年、「APNG」と呼ばれるファイル形式が注目を集めています。
このAPNGはGIFと比べて画質がきれいだったり、透過可能だったりといったメリットがあります。
今回はAPNG形式ファイルのメリット、デメリットとAPNGファイルを作成する方法について解説します。

 

APNG形式とは

「APNG」とはAnimeted Portable Network Graphicsの略称であり、連番のPNG画像をパラパラ漫画のようにアニメーション再生させられる画像形式のことを言います。

このAPNGは見た感じだとひとつのファイルですが、その中には何十枚もの静止画ファイルが格納されています。

この何十枚もの静止画ファイルは連番ファイルから変換したもので、APNGファイルの再生時は、この静止画連番ファイルを連続したアニメーションのように表示していきます。

APNG形式自体は2004年から存在していましたが、作成から3年経った頃でも公式が仕様に含めていない、対応しているWebブラウザもFirefoxだけなど、不遇の期間が長く続きました。

しかし2021年現在では、Firefox以外にも ChromeやSafariなど、APNG対応済みのWebブラウザが増えてきており、LINEの動くスタンプでもAPNGファイルが使用されるなど、日の目を見ています。

 

APNGのメリット

APNGのメリットには以下のものがあります。

• 256色を使用できる
• グラデーションや透過処理ができるので、より滑らかにアニメーションを表現可能

APNGと同じくアニメーションを表現するGIFが256色しか扱えないのに対し、APNGはPNGと同じく全ての色を使用可能です。
また、APNGではグラデーションや透過処理も可能なので、GIFなどと比較して、より滑らかできれいなアニメーションを表現できます。

 

APNGのデメリット

APNGのデメリットとして挙げられるのは、以下の要素です。

• Internet Explorerでは未対応
• 色数やグラデーションを増やすとファイルサイズが大きくなる

現在Internet Explorerではアニメーションを表現できず、PNG画像として表示されてしまいます。
また、APNGはGIFよりも多くの色を使えることがメリットではありますが、色数やグラデーションを増加させるとその分だけファイルサイズが重くなるので、データサイズが増加しないようにファイルを作成する必要があります。

 

APNGの作成方法

APNGを作成するには以下の2種類の方法があります。

• あらかじめ用意した連番画像をAPNGに変換する
• アニメーションを作成し、それをAPNGファイルとして新規作成する

 

連番画像をAPNGに変換する

まず、あらかじめ用意した連番画像をAPNGに変換する方法ですが、こちらは以下の2つのソフトを使うことで変換可能です。

• アニメ画像に変換する君
• APNG Assembler

以下、詳しく解説します。

 

アニメ画像に変換する君

「アニメ画像に変換する君」は簡単な操作でPNG画像を複数枚つなげ、APNGを作れるソフトです。

アニメ画像に変換する君はWindowsではMicrosoft Store、MacではMac App Storeからダウンロードできます。

使用方法は以下のとおりです。

• 準備した静止画像を動かしたい順番に応じて「ファイルを選択」→Shiftキーを押しながら複数枚選択してアニメ画像に変換する君へ入れる
• 「用途」のプルダウンメニューから任意の用途を選択
• フレームレート（画像が切り替わるスピード）とループ回数を設定し、「保存」
• エラーメッセージなど、アラートが表示された場合は、それに従って調整することで完成

 

APNG Assembler

「APNG Assembler」も「アニメ画像に変換する君」と同じ感覚で使用可能です。
公式サイトからダウンロードしてソフトを起動した後は、以下の方法で使用します。

• ソフトにドラッグ＆ドロップで連番画像ファイルを読み込む
• Playback Settingsボタンでループ回数を設定（Play indefinitelyを選ぶと無限ループ）
• Delays – All Framesボタンでフレームレートを設定します。15fpsにしたい場合は、「1 / 15 seconds」にする
• Compression Settingsボタンで圧縮形式を設定
• Make Animated PNGボタンで出力ファイルと出力先を設定し、APNGファイルとして出力

 

APNGを新規に作成する

新たにアニメーションを作成し、それを変換することでAPNGファイルの新規作成が可能です。
APNGを新規作成するときは「Adobe Animate CC」を使うのがおすすめです。
Adobe Animate CCを使ってAPNGファイルを新規作成するには、以下の方法をとります。

• Adobe Animate CCの「新規ファイル」項目から「HTML5 Canvas」を選択
• 任意のフォルダにflaとして作業用ファイルを保存
• 作業用ファイルを開き、画面右側のツールバーを使用して絵を描く。「プロパティ」で色の設定が可能
• 描いた絵をドラッグ＆ドロップで選択し、画面上のメニューバーの「修正」→「シンボルに変換」を選ぶ
• 「シンボルに変換」では種類をグラフィックに設定。選択時に青い四角が出ることを確認
• マス目状のタイムラインの黒い丸（キーフレーム）を確かめ、どこでも良いのでタイムライン内を右クリックし、「キーフレームの挿入」を選ぶ
• 灰色のフレームができるので、どこでも良いので右クリック後に「クラシックトゥイーンの作成」をクリック
• キーフレーム同士がつながれて色が青く変化し、矢印が表示される
• フレーム内のマークを動かした状態で絵を移動させる。
• Enterキーで絵が動いたことを確認する。
• 「ファイル」→「書き出し」→「ムービーの書き出し」で任意フォルダに連番画像を書き出す（「範囲」は「イメージサイズ」、「カラー」は32bit）
• 連番画像をAPNG AssemblerでAPNGに変換

この方法で、オリジナルのAPNGファイルを作成できます。

 

APNG形式を使うときの注意点や対応ポイント

APNGは色数の多いアニメーションを滑らかに表現できるファイル形式ですが、使用時の注意点があります。
APMGファイルを使用するときの対応ポイントは以下のとおりです。

• Internet Explorerでは非対応

 

Internet Explorerでは非対応

現在APNGはEdge、Chrome、Firefox、Safariなどのブラウザではサポートされており、アニメーションを表現することが可能です。

しかしInternet Explorerでは未対応であり、これらでアニメーションを動作させたい場合は、JavaScriptライブラリの「apng-canvas.js」を使います。

JavaScriptライブラリの「apng-canvas.js」を使うことで、IEでもAPNGを擬似的に動作させられます。

 

まとめ

今回はAPNGのメリットとデメリット、APNGの作り方と使用する際の注意点などを解説しました。

APNGには未対応ブラウザ(主にIE)もあり、現在TwitterではAPNG形式画像投稿が「セーフガードを無視して、デバイスのパフォーマンスが低下する」という理由で禁止されているなどの課題があります。

しかしAPNGは制作が簡単で使える色数もGIFより多いので、色数の多いアニメーションを簡単に作りたい場合はAPNG形式を使用してみてはいかがでしょうか。