APNGは、PNGの別の表現方法であり、GIFの改訂版ですか？

Chrome 59 から apng がサポートされていますが、IE ブラウザのみサポートされていません。

APNG の作成には screenToGif を試してみることができます。画面録画から gif、ビデオ、apng に変換することができ、非常に強力です。

一、初めまして、自己紹介をします#

APNG は「Animated Portable Network Graphics」の略で、PNG のビットマップアニメーション拡張です。PNG 形式の動的画像効果を実現することができます。しかし、私の父である PNG は私を認めてくれませんでした。私を野良と思っています。ああ、昔話になりますが、かつて父 PNG は MNG という画像形式を育てました。PNG アニメーションの標準となり、主流になることを期待していました。しかし、MNG は頼りなく、社会のリソースを浪費しすぎたため、父 PNG は彼を放っておくことにしました。

幸いにも、Mozilla は私を嫌いませんでした。彼らは私を育て続け、いつか GIF の後継となる次世代の動的画像の標準になることを願っています。そうです、私は今年 10 歳です。私は 2004 年に生まれましたが、多くのブラウザが私をサポートしていないため、特に私の父 PNG は私を認めることを拒否し、彼の使い物にならない MNG に固執しています。そのため、私はずっと無名のまま成長してきましたが、最近、私は注目を浴びるようになりました。

Chrome などの Blink/webkit エンジンを搭載したブラウザは、自分たちの子供である webP を大切にしており、APNG にはまだ関心を持っていません。しかし、iOS のサポートがあることで、APNG は一つの世界を支配する兆しを見せています。

二、油断せず、基本的な特徴を紹介します#

以下の APNG の説明には多くの実際の APNG の例が含まれています。実際のアニメーション効果を表示するには、FireFox ブラウザまたは Safari 8 ブラウザを使用することをお勧めします。または、APNG デコードプラグインをインストールしてください。

なぜ異なるブラウザで APNG が異なる表示になるのでしょうか！これは APNG の素晴らしい特徴です。自然な下位互換性を持っています。理由を尋ねるなら、APNG の構造原理について説明する必要があります。まず、APNG は PNG アニメーションであり、GIF アニメーションと同様に、複数のフレームで構成されています。その中で、最初のフレームは標準の PNG 画像であり、後続のフレームには PNG 画像だけでなく、残りのアニメーションやフレームレートなどのデータも含まれています。したがって、ブラウザが APNG の後続のアニメーションデータを認識しない場合でも、問題ありません。最初のフレームが標準であるため、問題なく表示されます。サポートされている場合は、後続のフレームが再生され、アニメーション効果が得られます。

APNG の魅力的なアイコンを例に取ると、APNG のアイコンは 2 つのフレームからなる APNG 画像です。最初のフレームは「お使いのブラウザは APNG をサポートしていません」という文字列の PNG 画像であり、2 番目のフレームには「お使いのブラウザは APNG をサポートしています」という文字列の画像とフレームの再生間隔、再生回数などのデータが含まれています。したがって、Chrome ブラウザはフレーム 1 を表示します（APNG を認識しないため）、FireFox はフレーム 2 を表示します（アニメーションは 1 回のみ再生されます）。pingwest の翻訳記事

特定の用語については心配する必要はありません（興味がある場合は、ここを参照してください）。主に SVG グラフィックスの 3 つの矢印に注目してください（そうです、SVG ですが、IE7/IE8 では回避されます）。最初のフレームでは IDAT は IDAT（png はまだ png であり、すべてのブラウザが認識している png です）ですが、後続の 2 番目と 3 番目のフレームでは IDAT が fdAT に変わり、他のいくつかの要素が混ざります（標準の png ではありません）。

これだけ話しても、APNG と gif の利点を大々的に宣伝していませんね。明らかな違いは画像の品質です。gif は最大 256 色しかサポートせず、アルファ透明チャネルもサポートしていません。これらの問題により、gif は以下のようなグラフィックスアニメーションで品質が非常に悪くなります：

色彩豊かな画像、例えばビデオの gif スクリーンショット（色が足りません）；
半透明効果を含む画像（完全に透明か完全な色）。以下の比較画像を見て、APNG の素晴らしさを感じてください（APNG の父である Mozilla 公式からのものです）。

繊細な効果は画像のサイズを犠牲にしますが、これは色彩豊かで Alpha 半透明の画像に当てはまります（色彩が豊かでない場合は、FireWork で png8 Alpha 透明として保存することができ、サイズは gif と同じかそれ以下になります）。

比較すると、APNG の競合相手である webP についても触れなければなりません。webP も高品質な画像アニメーションを実現することができます。そのブラウザサポートは Chrome と Android を中心に広がっています。すべての父親には私心があります。APNG の父は webP という子供を無視しますし、webP の父は私を無視します。ああ、APNG と webP のどちらが優れているかはまだわかりません。現時点では、APNG は FF/Sarari と iOS をサポートし、webP は Chrome/Opera と Android をサポートしています。それぞれが半分ずつの市場を獲得しています。勝者は誰か、はっきりとは言えません。

三、皆で協力し、利益を最大化しましょう#

iOS8 の APNG サポートは重要な意味を持っており、高品質の動的画像がモバイルデバイスで普及し始めることを示しています（PC では IE が何もサポートしていないため、笑）。そのため、以前は扱いにくかった機能には新しい技術オプションがあります。

例を挙げましょう。以前、国際版の QQ には複雑で繊細でダイナミックなスプラッシュアニメーションがありました。GIF アニメーションの画質がローユーフォンと同等だったため、放棄され、最終的にはクライアント内のビデオで実現されました。しかし、今では、iOS8 が APNG をサポートしているため、高品質のアニメーション効果には新しい技術的な解決策があります。デザイナーは自分で APNG アニメーション画像を作成し、シンプルな埋め込みページに提供することができます。アニメーションはいつでも更新できます（例えば、祝日など）し、効果も素晴らしいです。Android では webP を使用することができます。

通常の Web アプリケーションページでは、APNG と webP を組み合わせて、判断によって異なるアニメーション形式を表示して、細かいアニメーション効果を実現することができます。素晴らしいですね！

四、APNG の作成、熱熱熱熱（これは興奮することです、上記では誰も見ていません）#

APNG のリソースについては、この場所に行けば十分です：http://littlesvr.ca/apng/。ほぼすべての APNG 作成ソフトウェア（現在 9 つ）と APNG から GIF への変換、GIF から APNG への変換、APNG の逆コンパイルソフトウェア（ページの下部にあります）があります。

私は以下のソフトウェアを使用して作成しました：APNG Anime Maker。ダウンロードはこちら（最後のもの）です。ソフトウェアは非常に小さく、インストール不要です。以下の手順に従ってください：

ソフトウェアを開き、[open] をクリックし、シーケンス画像を選択し、各画像の間隔時間（デフォルトは 100 ミリ秒）、総再生回数などの情報を調整します。1000 ミリ秒に設定し、矢印で示されているボタンをクリックして、すべての画像に適用します。loop が 0 の場合、無限ループを意味します。[save] をクリックして画像を保存します。

それによって、以下のようないくつかの APNG アニメーションが作成されます：