beryulog

iOSアプリ/サーバーサイド開発者のメモと雑記

GIFアニメはPhotoshopで書き出すと綺麗で軽い

先日、CustomizableActionSheetというライブラリのスクリーンショットPNG画像からGIFアニメに差し替えました。
GIFアニメ書き出しに使うツールとして「ffmpeg」と「Photoshop」を試したんですが、Photoshopの方が圧倒的に綺麗・かつ軽く仕上がったのでメモっておきます。

元動画はQuickTimeの画面録画機能でiPhone Simulatorのウィンドウを録画したmovファイルです。

Photoshop CC 2015

Photoshop CC 2015でmovファイルを読み込んだ後、[ファイル] -> [書き出し] -> [WEB 用に保存] -> [GIF 128 ディザ]で書きだしたもの。
色の再現度は申し分なく、動きも滑らかです。
ファイル容量は918KB。

f:id:beryu:20160503234033g:plain

ffmpeg

コマンドラインffmpeg -i {movファイルのパス} -vf scale=372:664 -r 60 {書き出し先のパス} を実行して書きだしたもの。 なんだかザラザラしていて、再生速度も何故か遅い。。
右端に変な黒い帯入っちゃってるし。
ファイル容量は5.7MB。

f:id:beryu:20160503234859g:plain

結論

Photoshopで書きだしたものはGIFのカラールックアップテーブルが最適化されている感じで、iPhone Simulatorの色が忠実に再現されているように見えました。
一方のffmpegは、決め打ちのカラールックアップテーブルから最も近い色を選んで書き出してる感じなのかな?

ffmpegにもうちょっと綺麗に書き出せるオプションが有るのかもしれませんが、しばらくはGIFアニメをPhotoshop CC 2015で書き出すことになりそうです。