2017-06-16  アニメーションGIFのフレームレートを修正する

概要

アニメーションGIFの各フレームに設定されたディレイ時間が短いと,ファイル容量が大きくなることがあります。

手元にコンテンツの原盤があるなら,フレームレートを小さくして再出力してもらえばよいのですが,それが無理な場合,アニメーションGIFの各フレームを取り出してフレームレートを調整後,もう一度アニメーションGIFを作り直す必要があります。

各フレームの抽出,フレームレートの調整,アニメーションGIFの再出力は,Adobe Photoshopでできます。

手順

(1) PhotoshopでアニメーションGIFを読み込む。

(2) 各フレームをPNG形式で出力(ファイル→書き出し→ビデオをレンダリング)。

(3) このときフレームレートを指定できるので,任意の値を指定する。また後で何fpsにしたか必要になるので覚えておく。

(4) (1)で開いたアニメーションGIFを閉じる。

(5) (2)で出力したPNGファイルを画像シーケンスとして開く(ファイル→開く→画像シーケンスON→開くボタンクリック)。

(6) 画像シーケンスとして開く際の注意点。ファイルを複数選択するのではなく,先頭のファイル1件のみを選択して開く。ファイルを複数選択してしまうと,各々のファイルが独立して開かれる。シーケンスとして開いてくれない。

(7) このときフレームレートを聞かれるので(3)のフレームレートを入力する。

(8) アニメーションGIFを書き出す(ファイル→Webおよびデバイス用に保存)。

(9) 書き出す際の注意点。ループオプションが「一度」になっているはず。必要に応じて「無限」にセットし直す。

ディレイ時間とfpsの対応表

アニメーションGIFではフレームごとにディレイ時間を設定して,再生時間を決めています。このためfps→ディレイ時間,反対にディレイ時間→fpsといった変換をすると,全体の再生時間(いわゆる「尺」)が微妙に合わなくなります。

ディレイ時間とfpsを双方に変換した際に,誤差が少ない(であろいう)値には,「*」をつけてあります。現実に使うのは,10fpsか5fpsのどちらかでしょう。

ディレイ時間(秒) fps *
1/100 100 *
2/100 50.0 *
3/100 33.3
4/100 25.0 *
5/100 20.0 *
6/100 16.7
7/100 14.3
8/100 12.5
9/100 11.1
10/100 10.0 *
11/100 9.09
12/100 8.33
13/100 7.69
14/100 7.14
15/100 6.67
16/100 6.25
17/100 5.88
18/100 5.56
19/100 5.26
20/100 5.00 *