ホームページ制作・大阪インフォメーションメディアデザイン

06-6809-5021

Column
コラム

APNGを使って美しいアニメーションを実装する方法

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly
APNGを使って美しいアニメーションを実装する方法

これまでアニメ画像といえばアニメーションGIFを使って、簡単なアニメや点滅画像などを作成していましたが、GIFは色数が制限されるため、元画像の色数が多い場合は最大でも256色まで色数を減らす必要があり、透過の場合もジャギが出るなど品質的にやや問題がありました。(ちなみに上のアイキャッチ画像は容量の問題があったため、アニメーションGIFで作成しています)
 
しかし、今はアニメーションGIFに代わる次世代アニメーション画像形式としてapng(Animated Portable Network Graphics)という画像形式が追加されています。
身近なところでいうとLINEスタンプの動くスタンプがAPNG画像を使用しています。
 
そして、昨年からChromeでもAPNGに対応しており、今後益々活躍の場も増えるのではないかと考えられます。
そんなAPNGについて紹介したいと思います。
 
※以下、この記事内でAPNG画像を使用しますが、非対応ブラウザでは静止画として表示されるかと思います。悪しからずご了承願います。

APNGとは

エーピングと読みます。アニメーションPNGとも呼ばれたりしますが、画像ファイル形式のPNGをアニメーションに対応させた規格になります。実はAPNGの歴史は以外に古く、2004年にMozillaによってフォーマットが作成されています。ただし3年後には仕様に含めないものとして外されてしまいました。

そのため、最近になるまでFireFoxでしか使えない規格でした。
2014年よりSafariで、2017年よりChromeとOperaでサポートされるようになりました。
つまり、InternetExplorerとEdgeではサポートされていません。

一番多く目にしているのは、先述したようにLINEの動くスタンプだと思います。

APNGにするメリット、デメリット

メリット
アニメーションGIFは256色までしか使えないため、どうしてもグラデーションなどに滑らかさが表現できませんでしたが、APNGは24bitカラー(1677万色)に対応しているので、グラデーションを多用した画像も滑らかに表示させることが可能です。
PNGの特性でもある半透過も使用可能です。

デメリット
24bitカラーを使用した場合、どうしてもファイルサイズが大きくなってしまいます。APNGは8bitカラー(256色)にも対応していますので、減色処理を行うことで対処できます。
Adobe PhotoshopでAPNGの入出力に対応しておらず、読み込んだ場合も単なるPNGとして1コマ目が表示されます。
また、主要ブラウザ全てに対応していないというのも大きな欠点です。

Photoshopが使えない?どうやって作成するの?

何はともあれ、とりあえず作ってみたいと思います。
差がわかりやすいように、滑らかなグラデーションや半透過の影などを付けたサンプルを作成したいと思います。

アニメーションGIFの作成方法は割愛します。APNGは1コマづつPNGで書き出します。
こんな感じ。



これをAPNGに変換します。
今回はオンラインで変換できるこちらのサイトを利用します。

Online APNG Assembler
http://littlesvr.ca/apng/assembler/assembler.php
このサイトでは画像を数字やアルファベット順で一つのフォルダにまとめ、zip圧縮しておく必要があるようです。

入力が必要な箇所は下記のようになります。英語サイトなので翻訳も付けておきます。
必要に応じて変更を行ってください。



①Time to display each frame:
各フレームを表示する時間

②Don’t show the first frame on APNG-aware viewers:
APNG対応のビューアで最初のフレームを表示しない

連番で作成したPNG画像をフォルダごとzip圧縮したものを用意して、ファイルを選択

「create APNG」をクリックするとAPNGが作成されます。

アニメーションgifとの比較

こうしてAPNGを作成することができたので、アニメーションGIFと比較したいと思います。
わかりやすいようにCSSで濃い色の背景色を敷き比較します。


・GIFの場合
細かなグラデーションが表現できないため、トーンジャンプが起こります。
また、背景との境界にジャギが出ます。
影を透過にしたのですが、普通のグレーで表示されます。


・APNGの場合
GIFと比べるとグラデーションが滑らかに表示されます。
背景との境界も気になりません。濃い背景にしても問題ないです。また、影の透過もきちんと表示されます。

まとめ

というわけでAPNGの作り方とGIFとの比較をお届けしました。
Microsoftのブラウザが対応していないのでまだまだメジャーにはなっていないAPNG。

実は、さらにGoogleが開発したWebP(ウェッピー)という画像フォーマットがあり、WebPはPNGやJPEGと比較してもファイルサイズが小さく、アニメーションにも対応しているとのこと。
このWebPをMicrosoft Edgeがサポートし、Firefoxもサポートする方向で動いているとのことで、今後のアニメーション画像のシェアNo1がAPNGになるかWebPになるのか?メジャー争いから目が離せません。

この記事を共有する

その他の最新コラム記事

人気記事ランキング

コラムカテゴリ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly
お問い合わせ