話題の記事

[iOS 8] Safari 8 でAPNG(アニメーションPNG)がサポートされました。

2014.09.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、清田です。

iOS 8にアップデートされるタイミングで、モバイル側のSafariもバージョン8にバージョンアップされました。その際、新しくサポートされたAPIをいくつかご紹介していこうと思います。

今回ご紹介するのは、次世代SafariでサポートされたAPNGについてご紹介します。

APNG(アニメーションPNG)とは

Animated Portable Network Graphicsの略称で、APNGと呼ばれています。png画像にアニメーションを加えたファイルフォーマットです。皆さんご存知のアニメーションGIFのPNG版と思っていただければと思います。

どこが開発?

APNGを開発したのは、皆さんもご存知のfirefoxをブラウザ開発した、mozilla社が提案した技術です。 2004年に提唱され月日がたっているのですが、自分は実案件等で今日まで使ったことがありませんでした。

なぜだろう?

それは、PNG Groupというpngの使用を策定している団体に、2007年に公式にAPNGを不採用とする事を決定されてしまっています。ありゃりゃ。。。

PNGやMNGの規格は、PNGグループによって策定が行われているが、現在のところ、動画形式のPNGとして公式に認められているのはMNGフォーマットだけとなっている。アニメーションPNGについては、PNGの思想と矛盾する点があるとして、2007年4月に公式なフォーマットとして認めることが否決されている。

参考記事:アニメーションPNGを作成する--FirefoxのCSS対応 番外編

ブラウザのサポート状況

ブラウザ(モバイル系)

ブラウザ名 バージョン
iOS Safari 6.0-6.1 7.0-7.1 8
Android Browser 4.2 4.3 4.4
Chrome for Android 35
Firefox for Android 30
Opera Mobile 22
IE Mobile 10

ブラウザ(PC系)

ブラウザ名 バージョン
IE 8 9 10 11
Firefox 28 29 30 31
Chrome 33 34 35 36
Safari 5 6 7 8
Opera 19 20 21 22

表で確認すると、firefoxブラウザ意外のブラウザでは、現行ではサポートされていませんね。。。

参考記事:Can I use Animated PNG?

アニメーションGifとの違いって?

画像で確認

実際の画像で違いを確認してみたいと思います、確認する際はYosemiteのsafari 8、または、Firefoxブラウザにて確認してください。

アニメーションGif アニメーションPNG

8-bit GIF = 26371 bytes

8-bit APNG = 23680 bytes

8-bit GIF = 31656 bytes

8-bit APNG = 29360 bytes

8-bit GIF = 24912 bytes

24-bit APNG = 115656 bytes

Gif画像のアニメーションで特有のジャギーが見られますが、apng画像には見れずきれいに背景にとけ込んでいます。 また、ファイルサイズもそこまで大差ないですね!

参考記事:gif_vs_apng

今後の動向について

APNGの概要をご紹介しました、普及しているアニメーションGifのスペックは進化したデバイスでは物足りなさを感じますね。
今回のアップデートでAPNGをサポートしたことで、モバイルWebブラウザで動作するゲームなど、表現の幅が広がりましたね!

次回は、実際にANPNGの作成方法をご紹介したいと思います。