2016年06月10日

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


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

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

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

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

Trapeze_photoshop.png

GIFアニメーション


Trapeze01.gif


PNGアニメーション

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

Trapeze01_animated.apng
 「APNG Assembler 2.9」で作成。

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

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

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


posted by ネコ師 at 04:29 | Comment(0) | apngアニメーションの作り方 | このブログの読者になる | 更新情報をチェックする

2016年06月06日

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]

photoshop_render01.png


 [Render Video]ウインドウが開きます。

@ [Select Folder]をクリックして保存するフォルダを作成します。(今回はデスクトップに[DDD]というフォルダを作成

A [File Options]の[Image Sequence]で[PNG](またはJPG)を選択

B [Size]で[Custom]を選び、出力する画像のサイズを入力。(アスペクト比に連動しないので、自分で計算します。)

C [Render]をクリック。
 この設定では、[DDD]というフォルダに横272px 縦400pxのスライドがPNG形式で全て出力されます。

photoshop_render02.png


PNGアニメーションの作成

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

スライドを保存したフォルダ(「DDD」)を開きます。

@ フォルダ内の画像を全選択([Ctrl]+[A])。「APNG Assembler」の窓にドロップします。

A 作成するファイルの名前、保存場所を決めます。変更しなければ[APNG Assembler]のフォルダ内に作成されます。

B [Make Animated PNG]をクリック。

APNG_Assembler001.png


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

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

【PNGアニメーション】
(IExplore、Google Chromeでは静止画像として表示されます。Firefoxでご覧下さい。)

Violin PNG Animation


【GIFアニメーション】

violin GIF Animation


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

  44


posted by ネコ師 at 00:18 | Comment(0) | apngアニメーションの作り方 | このブログの読者になる | 更新情報をチェックする

2015年02月15日

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


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

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

 先ずは見比べて下さい。サイズが小さいと分かり難いので、拡大表示します(・・・、と思ったのですが、拡大表示しても違いがよく分からないので通常表示にしました)。
 (PNGアニメーションは、IEやGoogle Chromeではこの形式に対応していないため静止画像として表示され動きません。FirefoxかOperaでご覧下さい。)

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

【GIFアニメーション】
Cat_animated.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.png


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.apng


関連記事:「鏡に映るエリザベート:立体GIFアニメ
 (追記:2016/06/05)

APNG Anime Maker

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

APNG_Anime_Maker1.jpg


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


posted by ネコ師 at 19:53 | Comment(0) | apngアニメーションの作り方 | このブログの読者になる | 更新情報をチェックする

2015年02月05日

IrfanViewでPNGアニメーションを表示する方法


 最近話題になりつつあるPNGアニメーションですが、残念なことに、それを表示するのがとても難しい状況です。

 PNG型式のアニメーションは、拡張子が「apng」となっています。
 この型式は、IrfanViewでは表示できません。これを表示するにはIrfanViewテストバージョンを使います。

 このテストバージョンは、IrfanViewのForumで、「 Bhikkhu Pesala」氏が提供しています。
 リンクを開くと、下の方の「コメント#8」で下図のような部分があるので、赤枠の部分をクリックしてダウンロードします。

Irfan_forum1.gif


 ダウンロードしたファイルを解凍すると、IrfanViewの実行ファイル「i_view32.exe」と「plugins」というフォルダの中に9個のdllファイルが入っています。これらをすべてインストールされているIrfanViewのフォルダの中味と入れ替えます。実行ファイルも入れ替える必要があります。

 通常、ファイル形式の関連付けは、[オプション]⇒[関連付けの設定]から行いますが、「apng」は表示されません。このため、直接関連付けします。[apng]形式のファイルを右クリック ⇒[プロパティ]、[プログラムの種類]で[IrfanView]を選択。これで、[apng]形式のファイルもクリックするだけでIrfanViewで開けるようになります。

 このテストバージョンを導入すると、(apngではなく)[png]型式のアニメーションも表示できるようになります。これを表示している状況をキャプチャしたものが下の画面です。拡張子が[png]となっているのを確認下さい。(昨日の記事もご覧下さい。)

PNG_ANIMATION_Expl.gif


 このテストバージョンは、今のところ不具合はありません。実行ファイルの日付けを見ると「2014.11.17」となっているので、特に問題はなさそうです。インストールした9つのdllの日付が少し古かったので心配したのですが、大丈夫みたいです。

 apng型式を表示できるブラウザは、FirefoxとOperaに限定されています。Seesaaブログでも表示可能です(昨日の記事でも表示しています)。
 しかし、pngアニメは、ファイルをSeesaaブログにアップロードした段階でファイルが壊れるようで、静止画像になってしまいます。そのファイルをダウンロードしてもアニメーションしません。

 色々試した結果、やはり、png型式のアニメーションというものはなく、あくまでもapng型式のようです。しかし、拡張子apngをpngに変更してもアニメーションは動きます。

【追記】

 pngアニメーションを表示できるビューアとして、「XnView」があります。なんでも500種類以上の画像を表示できるビューアなのだそうです。ダウンロードはこちらのリンクから。今日現在のバージョンは、Version 2.25が最新です。
 

posted by ネコ師 at 01:41 | Comment(0) | apngアニメーションの作り方 | このブログの読者になる | 更新情報をチェックする

2015年02月04日

PNG型式でアニメーションができる! APNG型式ではない!


 今日は、ちょっと不思議なPNGアニメーションのお話しです。
 『そんなの知っているよ。「apngのことだろう?」』 ちょっとお待ち下さい。拡張子がpng型式のアニメーションのお話しです。拡張子が「png」なのにアニメーションになるという記事です。

 通常、web上のアニメーションはGIF型式のものが用いられています。GIFアニメとも呼ばれています。
 GIFアニメの欠点は、GIF型式が色数が少ないことから、どうしても荒れた画像になること。この点、PNG型式を用いれば問題は解決します。

 PNG型式ではアニメーションができないと考えられていますが、PNG型式でのアニメーション「Animated png」は、実はできます。拡張子は『apng』になります。GIFアニメと比較してとてもキレイに仕上がるのですが、大きな問題があります。この「apng」型式を表示できるブラウザがとても限られていることです。FirefoxとOperaでは表示できますが、IEとChromeでは表示できません。つまり、ネットでは使えないと言うことです。

 さらに、画像表示ソフトもほとんど全滅状態です。せっかく作った「apngアニメ」を表示できません。このため、このファイルを開くプログラムをFirefoxに指定して開くことになります。

 ここら辺の情報は巷にあると思います。ここからが本番です。
 拡張子「apng」ではなく、拡張子「png」のアニメーションがあります。

 このサイトにうまく表示できないので、動いているところをキャプチャしたGIFアニメでご覧下さい。
 IrfanViewの上部バーにファイル名が表示されていますが、拡張子が「png」となっているのを確認できます。

PNG_ANIMATION_Expl.gif


 「そんなバカな! これはフェイクだ!」などと疑われる方のためにファイルをアップします。このブログではアニメーション表示できませんが、ファイルをダウンロードして、ファイルのプロパティから開くプログラムをFirefoxに指定して、確認して下さい。

 png型式アニメーションファイルです。下の画像をクリックするとダウンロードできます。

PNG_Animation0.png

 ダウンロードサイトからダウンロードして下さい。ここに貼っているファイルではなぜか動きません。(Seesaaブログにアップしたファイルはアニメ機能が壊れてしまうようです。)
 ダウンロードパスワード: cesar

 上の説明用GIFアニメでは、IrfanViewで表示していますが、実は、IrfanViewの最新バージョンでも、この「PNG型式アニメ」は表示できません。上でキャプチャしたのは、IrfanViewテストバージョンを使っています。とてもややっこしいです。テストバージョン用プラグインだけではだめで、IrfanViewを再インストールすることになりました。

 ブラウザも画像ビューアも対応していない型式なんて、なんの役に立つの? という意見があると思いますが、GIFアニメを作っている人にとって、画質を向上したいというのが切実な願いだと思います。PNGアニメはその問題を解決してくれるのですが、残念ながら広まっていません。

 PNGアニメの表示は難しいのですが、APNGアニメなら、GIFアニメと同じ感じで簡単に表示できます。
 下のアニメーションは「APNG」型式です。IEとChromeでは停止画像として表示されています。
APING_Animation10.apng



 今後勉強しますが、形式が色々あるわけではなく、あくまでも「APNG」型式で、アセンブラの関係のようです。PNGアニメを表示しているサイトもあるので、その表示方法を研究したいと思います。

 このテーマは奥が深いのでぼちぼち更新していきます。とりあえず、今日はここまで。


posted by ネコ師 at 03:41 | Comment(0) | apngアニメーションの作り方 | このブログの読者になる | 更新情報をチェックする

▲ このページのTOPに戻る