ZIZO DESIGN ノート

お問い合わせ

もっとeasyにgifアニメを軽量化したい! vol.1

20150219c

どうも、gifアニメ研究家(自称)の僕です。
前回のgifアニメのあれこれという記事に引き続き、みんなが頭を悩ませるであろうgifアニメの軽量化についてご説明させていただきます。みんなあつまれ!

gifアニメってなに?

ここから話すのかよ、って感じですが一応おさらい。gifアニメってのは、一枚一枚の画像を連続で表示することであたかも動画のように見せることができるファイル形式です。わかりやすくいうとパラパラマンガです。1秒あたりに表示するコマのことを「fps」(frames per second)といいますが、テレビは29.97fps、映画は24fps、GIFアニメーションの場合には、1〜15fps程度です。 また、動画は、動きがない場合でも同じフレームを繰り返し使う必要がありますが、gifアニメは、フレームごとに表示する秒数を決定できます。

我らがWikipediaにわかりやすく長所と短所が書いてあったので、堂々と転載します。

長所
1. 製作者と閲覧者双方にとっての簡便さが最大の長所である。
2. 古くから多くのウェブブラウザで標準サポートされており、プラグイン等は不要である。
3. 動画編集ソフトもウェブプログラミングも必要ない。必要な静止画と、簡単な変換ツールがあればいい。
4. HTMLでの記述も通常の GIF 画像同様の <img> タグや <a> タグが使える。
5. 背景を透過できる(GIF 共通の機能)。

短所
1. さまざまな理由から、大規模な動画には向かない。
2. 画像以外のストリームを持たない。特に、音声ストリームを持たない。
3. 最大 256 色しか使えない。そのため、自然画の表現は難しい。
4. フレーム間圧縮がない(同じフレームの再利用はできる)。
5. 多くのムービープレイヤーでは再生できない。
6. Windows VistaやWindows 7 では、標準添付のフォトビューワで表示されない。

この長所の2つ目と3つ目がとても重要です。
理由は後ほど。

 

なんで軽くするの?

先述のように、gifアニメにする際、一枚一枚は軽くともその画像を連続で並べるため、枚数が多ければ大きいほど、秒数が増えれば増えるほど容量はどんどん加算されていきます。現在は昔ほど軽容量至上主義ではないですが、軽ければ軽いほどたくさんの人に見てもらえるチャンスが増えるわけで、とにかく軽いに越したことはない。何より重いといろんな方面からおこられます。おこです。おこって古いか。

最近多い仕事は、PCのトップに大きめの動画が流れるサイト。対応するブラウザのバージョンにもよりますが、PCならYouTubeの動画をそのまま引っ張ってきて表示するか、mpeg4などを直接読ませることが多いです。gifアニメを使うことも稀にありますが、よほど古いバージョンのブラウザに対応せざるを得ないときなどにしか使いません。表示サイズが大きい動画をgifアニメにしようもんなら動画よりも重くなりがちで、画質も荒いわ、色数も少ないわ、それでいてサイズが大きいわ、となれば本末転倒状態ですわ。

じゃあいつgifアニメ使うんだよ!と思いますが、本日ほにゃららSEが出たあれですよ、あれ。そうです、スマホです。

長所の2のように、ブラウザ依存しないので、iPhoneでもAndroidでもWindowsPhoneでも再生できます。プレイヤーもいらないので、表示させたい場所に、表示させたい動画を再生させることができます。

LTEのご時世とはいえ、携帯電話の通信速度はそれほど早いものではなく、ページが重ければ重いほど「クッソ重いな、このサイトは!」と客は離れていきます。

 

簡単に軽くするには?

また、長所の3にあるように、動画編集ソフトは必要とせず、簡単な変換ツールさえあればすぐに作ることができます。とはいえ昔はgifアニメ作成のための専用アプリケーションをインストールしたりしなくてはならなかったし、今ではPhotoshopで動画をgifアニメに変換できたりしますが、タイムラインも微妙に使いにくくそこそこイライラしてしまいます。

そこでインストールいらずで静止画・動画をgifに変換でき、サイズ変更、圧縮、fpsの調整までできるwebサイトをご紹介します。(つづく)