短い答え
GIF作成を開き、画像をドロップし、流したい順に並べ、1コマをどれだけ表示するかを決めて、GIFを作ります。保存する前に、ページの上で動きます。
以下はすべて、そのあとで起きる2つの困りごとについてです。ファイルが思ったよりはるかに大きい、あるいはアニメーションが指定した数字より遅く動く。どちらにもはっきりした原因があり、どちらも道具の不出来ではありません。
GIFが思っているよりずっと大きい理由
640ピクセル・20コマのGIFは、ふつうに8〜15 MBになります。同じアニメーションがMP4なら数百キロバイトです。それは出来の悪いGIFではありません。GIFという形式がそういうものなのです。
あなたが使ってきた他の動く画像の形式はどれも、差分を保存しています。動画のコーデックは完全な絵を1枚書き、そのあとのコマについては、何がどこへ動いたかだけを書きます。だからこそ、止まった背景の前で人が話している動画は1コマあたりほとんど何も要りません。GIFにはそれができません。どのコマも画素そのものとして保存され、可逆の圧縮器を通されます。道具箱の中身はそれで全部です。
画質の設定もありません。下げるべき非可逆の工程がそもそもないからです。品質60 %のJPEGは、後ろに本物のつまみのある本物の選択ですが、GIFにそれに当たるものはありません。ですから大きさはおおよそ面積×コマ数であり、それを動かす道は、その2つの数のどちらかを動かすことしかありません。
本当に小さくする3つのこと
効く順に並べます。
1. 小さくします。これはいくつかある選択肢のひとつではなく、唯一の選択肢です。大きさは面積なので、長辺を半分にすればファイルは4分の1になります。640 pxを320 pxにすれば、12 MBがおよそ3 MBになります。ウェブのページやチャットの窓の中のGIFは、どのみち数百ピクセルで見られています。この道具の既定が480 pxなのはまさにそのためですし、320 pxもまったく立派な答えです。
2. コマを減らす。5分の1秒ずつ表示する10コマは、10分の1秒ずつの20コマとまったく同じ2秒のアニメーションで、ファイルは半分です。なめらかさはそのままバイト数に比例するので、動きがそれを必要とするところにだけ使ってください。
3. ディザリングを切り、色数を落とす。これは直感に反します。ディザリングは、パレットにない色を偽装するために画素を細かく交互に散らします。その模様は雑音であり、可逆の圧縮器がまさに圧縮できないものです。べた塗りの絵、画面の写し、線画では、これを切るとファイルが3分の1減り、しかも見た目もよくなることがあります。写真では、目に見える段差と引き換えの節約になるので、両方試して見比べてください。
256色から64色に落とすのも効きますが、期待されるほどではありません。画素を減らすのではなく、符号語を短くしているだけだからです。
それでも十分に小さくならないなら、正直な答えは「あなたが作っているのは動画です」ということです。同じ画像をMP4にすると、おそらく10分の1ほどの大きさになりますし、<img>タグ以外の用途でGIFを受け付ける場所はどこでも、つまりどのSNSでも、アップロードの時点で結局動画に変換されます。
GIFが実際どこまで速く動けるか
この形式は各コマの待ち時間を100分の1秒の単位で保存するので、0.01秒を指定すれば毎秒100コマになりそうに見えます。なりません。
どのブラウザも、100分の2秒を下回る待ち時間を10分の1秒まで引き上げます。この規則は1990年代のもので、当時のページが「できるだけ速く」と設定されたアニメーションであふれ、その頃の機械がそれに耐えられなかったことに由来します。導入の理由はすべて過去のものになりましたが、規則は一度も取り除かれておらず、いまのあなたのGIFにも当てはまります。
ですから実用の範囲はこうなります。
- 0.02秒（毎秒50コマ）。GIFに許されるいちばん速い値で、たいていの用途にはこれでも速すぎます。
- 0.05秒（毎秒20コマ）。なめらかなアニメーション。動きをつけるならここから始めてください。
- 0.1秒（毎秒10コマ）。いかにもGIFらしい見え方。コマは半分、ファイルも半分で、しかも狙ってやったように見えます。
- 0.5秒以上。スライドショーです。1枚ずつを眺めるものであって、動かすものではありません。
0.02秒より短い値は出しません。どのブラウザでも黙って0.1秒になる数だからです。
パレットが実際に選んでいるもの
GIFの1コマが持てる色は最大256です。写真には数万色あります。そこから256色を誰かが選ばなければならず、その選び方こそが仕上がりの見え方です。ほかのどの設定よりも効きます。
この道具は、その選び方を2つ用意しています。
コマごとに最適な色は、各画像にそれぞれの256色を与えます。いちばんくっきり見えますし、互いに関係のない写真を並べるときは、どのみち1枚ごとにまったく違う色が要るのでこちらが正解です。
GIF全体でひとつのパレットは、すべてのコマからまとめて1つの表を作ります。コマが連続しているとき、つまり同じ場面が少しずつ時間をずらして並んでいるときはこちらです。コマごとのパレットだと、絵が少し変わるだけで選ばれる256色が変わり、背景全体の色が1コマごとにわずかに揺れます。手作り感のあるGIFを手作り感のあるものにしているのは、その揺れです。共通のパレットはそれを消しますし、表が1回しか書かれないぶんファイルも小さくなります。
色数を減らすこと、128や64や32にすることは、べた塗りのものなら試す値打ちがあります。8色しか使っていないロゴのアニメーションは32色でも何も失いませんし、写真なら違いはすぐに分かります。
透明は1ビット、話はそれで終わりです
GIFの画素は、完全に塗られているか、まったく見えないかのどちらかです。あいだはありません。50 %の影も、柔らかい輪郭も、フェードもありません。
ですから元の画像に透明があるなら、透明を有効にすれば透明な部分は透明のまま残ります。ただし、形から無へ向かう傾きであるアンチエイリアスの縁は、途中で断ち切られて、硬く、目に見えてぎざぎざの縁になります。丸い形と文字がいちばん割を食います。
GIFが載る背景色が分かっているなら、その色の上に平らに焼き込んだほうが毎回きれいに見えます。透明を残すのは、載る先が本当に分からないときだけにしてください。そして「どんな背景でも柔らかい縁が要る」というのが答えなら、そのための形式はアニメーションPNGかWebPであって、GIFではありません。
順序と時間、そしてループをきれいに収める
自分で気づくより、先に知っておいたほうが早いことをいくつか。
名前順は正しく数えます。レンダリングや書き出しの連番は思ったとおりに並ぶので、frame_2はframe_10の後ではなく前に来ます。日付順は、カメラのフォルダーを撮った順に戻します。ファイル名が0001から始まり直しているときに欲しいのはこちらです。
最後の1コマは長めに。全部のコマが同じ長さのループは、休みなくせき立てるように見えます。最後のコマを半秒ほど留めておくと、目に置き場ができ、全体が狙ってやったように見えます。そのために、コマごとに表示時間を持たせてあります。
ループは飛んではいけません。最後のコマのすぐ後に最初のコマが来るので、その2枚が大きく違うとループが弾けます。似せるか、最後のコマを留めて、その切れ目をむしろ生かしてください。
1回だけ再生は、1回だけです。ループ回数として1を書き込む道具がありますが、その扱いはデコーダーのあいだで完全には一致していません。2回再生するものもあります。ここで「1回だけ再生」を選ぶと、ループの情報をまったく書きません。それなら、これまでに作られたどのデコーダーも同じように扱います。
これにサーバーが要らない理由
GIFを作ることは、ブラウザが用意していない2つの仕事です。パレットを選ぶことと、画素をLZWで圧縮すること。どちらも大きくはありません。あわせて400行ほどで、リポジトリにそのまま書いてあり、ここのほかのものと同じくあなたの端末の上で動きます。回線を抜いてもこのページが働き続けるのはそのためです。
多くのGIF作成サービスがアップロードさせるのは、この仕事が難しいからではありません。広告と会員登録があるのがサーバーだからです。写真の束をアニメーションに変えることのどこにも、あなたの写真がその部屋を出ていく必要はありません。
ファイルをアップロードしても大丈夫かでは、この道具も含め、どんな道具についても同じことを教えてくれる確認を4つ挙げています。