カテゴリー別アーカイブ: apngアニメーションの作り方

GIFアニメーションとPNGアニメーションの画質を比較したら意外な事実発見

 今話題のPNGアニメーション(apng)って、どれだけ画質が違うのか比較して見ました。

 カラーだと、色数で勝るPNG形式の方がきれいに見えそうですが、実際にはweb上で見る限りPNGとGIFのアニメーションは区別が付きません。

 どのような時に差が出るのか。
 いろいろやってみた結果、大きな差が出たのが下のアニメーションのケースです。

 サンプルとして、ブランコに乗った人のアイコンを使ってアニメーションを作ってみました。

GIFアニメーション

PNGアニメーション

 iExplorer、Google ChromeはPNGアニメーション未対応のため静止画像として表示されます。

Trapeze01_animated.apng

 「APNG Assembler 2.9」で作成。

 二つのアニメーションを比較すると全く違うことに気づきますね。GIFアニメの方はラインがギザギザですが、PNGアニメの方はきれいに表示されています。

 単色のアニメーションでこのような違いが起きるとは意外でした。

 GIFアニメでもうまくやれば結構きれいに作れるのですが、同じ条件で作っている今回の二つのアニメーションにこれだけの画質の差が生じたことに驚きました。

 PNG形式なのでグラデーションのことばかり考えていたのですが、ベクトル画像に使えそうです。

PNGアニメーションの作り方(Photoshop編)

 PNGアニメーションに対し注目が集まっているようです。やはり、iOS8がPNGアニメーションに対応したことで、スマホやタブレットでもPNGアニメーションを見ることができるようになったのが大きな要因でしょう。ただし、IExploreやGoogle Chromeは未だPNGアニメーションに対応していないので、静止画像として表示されます。

 前回書いた「PNGアニメーションの作り方」では、三つのフリーソフト(apng制作ツール)を紹介しました。今日は、`Photoshopの場合を書きたいと思いますが、現時点では、Photoshop用のAPNG作成プラグインはないので、結局、上で紹介したソフトを使うことになります。

手順

 Photoshopできれいに作ったアニメーションもGIFアニメーションとして出力すると画質が激しく劣化します。色数が少ないGIFの宿命です。

 PNGアニメーション手順は以下の通りです。
1.まず、Photoshopで、アニメーションを作成します。
2.次に、アニメーションの全てのスライドをpng形式かjpg形式で出力します。
3.PNGアニメーション作成ソフトを使って、PNGアニメーションを作成します。
4.できあがったPNGアニメーションの拡張子を「apng」に変更してwebにアップロードします。
 

Photoshopからスライドを出力

 Photoshopで作ったアニメーションのスライドを出力するには、以下のようにします。

 [File] ⇒ [Export] ⇒ [Render Video]

 [Render Video]ウインドウが開きます。
① [Select Folder]をクリックして保存するフォルダを作成します。(今回はデスクトップに[DDD]というフォルダを作成
② [File Options]の[Image Sequence]で[PNG](またはJPG)を選択
③ [Size]で[Custom]を選び、出力する画像のサイズを入力。(アスペクト比に連動しないので、自分で計算します。)
④ [Render]をクリック。
 この設定では、[DDD]というフォルダに横272px 縦400pxのスライドがPNG形式で全て出力されます。

PNGアニメーションの作成

 今回はフリーソフト「APNG Assembler 2.9」を使います(過去記事『PNGアニメーションの作り方』参照)。

 「APNG Assembler 2.9」を起動します。
スライドを保存したフォルダ(「DDD」)を開きます。
① フォルダ内の画像を全選択([Ctrl]+[A])。「APNG Assembler」の窓にドロップします。
② 作成するファイルの名前、保存場所を決めます。変更しなければ[APNG Assembler]のフォルダ内に作成されます。
③ [Make Animated PNG]をクリック。

 できあがったアニメーションが下のものです。

 PNGアニメーションはサイズが大きくなります。1.97MBもあります。しかし、画質は美しい。拡大すると分かりますが、GIFアニメと比べると雲泥の差です(拡大しないと違いが分からない程度ですが)。

 ちなみに、GIFアニメとして出力すると、そのサイズは0.36MBでした。PNGアニメの方が5.5倍大きなファイルになっています。

PNGアニメーション

(IExplore、Google Chromeでは静止画像として表示されます。Firefoxでご覧下さい。)

Violin PNG Animation

GIFアニメーション

YouTube動画

 このサンプルで使っているものは、以前、『バイオリンを奏でる動く絵画』としてYoutubeにアップしたものです。

PNGアニメーションの作り方

 今日は、一部で話題のPNGアニメーションの作り方をご紹介します。

 PNGアニメーションってGIFアニメーションと何が違うのか?
 画質が違います。

 先ずは見比べて下さい。サイズが小さいと分かり難いので、拡大表示します(・・・、と思ったのですが、拡大表示しても違いがよく分からないので通常表示にしました)。

 (PNGアニメーションは、IEやGoogle Chromeではこの形式に対応していないため静止画像として表示され動きません。FirefoxかOperaでご覧下さい。)

 サンプルとして、昨年作った「ヒツジ猫」を使います。

 ところが、このヒツジ猫は時間をかけて結構きれいに作ったので、GIFアニメとPNGアニメの差がほとんど分からない。なんてこった。めんどくさいのでこのままアップします。 拡大表示すると、空の部分に違いが現れていますが、縮小表示すると同じに見えますね。

【GIFアニメーション】

【PNGアニメーション】

Cat_animated.apng

PNGアニメーションの作り方

 PNGアニメーションを作るには「APNG Assembler 2.9」というフリーソフトを使います。このソフトはIrfanviewのフォーラムで回答者として活躍中の方が作成したものです。この手のソフトはダウンロード元を誤るとウイルスに感染する恐れがあるので、下のリンク先からダウンロードして下さい。

1.「APNG Assembler」というサイトから「APNG Assembler 2.9」をダウンロードします。

 上のリンクを開くとダウンロードリストにいくつかファイルがありますが、一番上の「apngasm_gui-2.9-bin-win32.zip」を選びます。

2.ダウンロードしたZipファイルを解凍するとフォルダの中に「apngasm_gui.exe」という実行ファイルが入っているので、これをクリックしてソフトを起動します。

3.アニメーションしたいファイルをソフトの窓にドロップ。ファイルをひとつずつ順番にドロップした方が、順番がずれるトラブルを回避できます。

 「Delays -All Frames」でスライドの時間を設定。上のヒツジ猫の雪の設定は[4/10]としています。
 最後に[Make Amimated PNG]ボタンを押してPNGアニメーションを作成します。

APNG_Assembler_exp0

Seesaaブログにアップロードする際の留意点

 「APNG Assembler 2.9」で生成されたPNGアニメーションは、拡張子が[.png]となっています。IrfanView(テスト版)ではそのままアニメーション表示できますが、Seesaaブログでは静止画像になってしまいます。

 そこで、ファイルの拡張子を[png]⇒[apng]に変更します。IrfanView(テスト版)では、どちらの拡張子でもアニメーション表示されます。Seesaaブログでは、拡張子が[apng]でないとPNGアニメーションとして表示できません。(『IrfanViewテスト版』については過去記事『IrfanViewでPNGアニメーションを表示する方法』をご覧下さい。通常のIrfanViewではPNGアニメは動きません。)

 拡張子[png]のPNGアニメーションをSeesaaブログにアップロードした段階でアニメーション機能は失われ、ただの画像ファイルになります。このファイルをダウンロードしても動きません。このため、アップロードする場合には、拡張子を[apng]に変更して下さい。

補足説明

 IrfanViewのフォーラムを閲覧していたとき、いつも回答者になっている、今回のソフトを開発したBhikkhu Pesala氏が「Creating Animated PNG Images (APNG) 」というタイトルのコメントの中で、「APNG Assembler」を紹介していたので試して見ました。GIFアニメがどうしても汚くなってしまう場合にお勧めです。

 しかし、このPNGアニメーションをどう使うかが大きな課題です。主要ブラウザのうち、IEとGoogle Chromeが「apng」型式に対応していないということが痛いです。

 なお、PNGアニメーションからスライドを抽出するには、「APNG Disassembler」というソフトを使います。

 また、GIF ⇒ APNG、APNG ⇒ GIFの変換ソフトも上でリンクしたサイトにあります。

 しかし、この変換ソフトは使い道がないように思います。高画質にするためにGIFではなくAPNGにしているわけで、GIF画像からAPNGを作っても意味がないように思います。やはり、きれいなPNG画像を使ってAPNGアニメーションを作るというのが本来の使い方でしょう。

別のソフトの紹介:日本製の「ApngComposite」

 スマホやタブレット(iOS8)でPNGアニメーションを見ることができるようになりました。
 そこで、この記事も追記することにします。

 アニメーションPNGを作るフリーソフトとして日本製の「ApngComposite」というフリーソフトがあります。Vectorからダウンロード可能です。使い方は以下の通りです。

1.ソフトをダウンロードし、解凍したフォルダ(「ApngComposite」)の中の実行ファイル[ApngComposite.exe]をクリックしてソフトを起動。

2.開いた画面の中に、アニメーションしたい全てのファイルをドロップします。ファイルは連番化しておくと便利です。ドロップした際に順番がずれる場合にはファイルを一つ一つドロップします。

3.[PREVIEW]ボタンで動きを確認。[QUEUE]ボタンを押した後で[MAKE]ボタンをクリック。プログラムフォルダ「ApngComposite」の中にアニメーションPNGが生成されます。拡張子はpngです。Seesaaブログにアップロードする場合には、拡張子を[apng]に変更します。

ApngComposite画面

 このソフトは、いろいろ細かな調整ができるので、後は使いながら覚えて下さい。

 下のアニメーションは、このソフトを使ってPNGアニメーションとして作ったものです。

elisabeth_PNG_Animation

関連記事:「鏡に映るエリザベート:立体GIFアニメ」

 (追記:2016/06/05)

APNG Anime Maker

 PNGアニメーションを作れるフリーソフトとして『APNG Anime Maker』があります。

 このソフトも操作方法はほぼ同じです。違うのは、ファイルをドロップするのではなく、[Open]から読み込むところ。読み込んだら[Save]で保存するだけのシンプル設計です。もちろん、アニメーション用のスライドがある場合のことですが。

APNG_Anime_Maker1.jpg

 このソフトで最適化を試して見ました。デフォルトの設定で作成したPNGアニメーションのファイルサイズは11.67MBと巨大なものになりましたが、最適化(Optimize)すると0.43MBに激減しました。拡大しても両者の違いを見つけることができない。