「サイズはこちらの方がほぼ半分⁉」原因を探しに行った話

昨日「うっ」となりました(笑)

どうも、Kyosukeです。

先日、私の作った Movie to GIF について、こう書かれている記事を見つけました。

書いてくださったのは、Marieさん（Small Gear Lab）。 noteのスキ動画コンテストに参加するはずが、GIF変換ツールを作っていた、という記事です。

容量の上限ぎりぎりまで画質を上げる設定を、自動で探してくれるツールを自作された話でした。 fps・解像度・色数の組み合わせを、片っ端から試すのではなく賢く絞り込んで探す。 （探し方にもちゃんと名前が付いていて、そこはぜひ記事を読んでみてください）

ほぼ「完璧」だと思っていたツール
みんなが使ってくれているツール

実は、見えない所に穴があった。

これに「うっ」となったんです。
（※先に、もう直っているので安心して使ってください。）

でもすぐに、これはありがたいぞ、と思い直しました。

「重い」とか「画質が悪い」とかではなく、そこに至るまでの過程や条件を揃えて、数字と実物で比較してくださっていたからです。

まだ「Movie to GIF」は改良できる！
開発魂に火がつきました🐸🔥
Marieさんありがとうございます。

そして、今日はその答え合わせです。
犯人はこの中にいます。

01. 今回の条件では、GIFの容量は「変化した〇〇数」と強く連動した

結論はシンプルでした。
素材が変わっても、解像度が変わっても、fpsが変わっても、この関係は崩れませんでした。
今回の条件では、GIFの容量は「変化した画素の数」と強く連動しました。

GIFの圧縮のしくみを説明💬 ※読み飛ばしてOKです。

GIFには「前のコマと同じ場所は、描き直さずに透明にして飛ばす」という仕組みがあります。

動かない背景を毎回描き直さないための、いちばん基本的な圧縮です。

この「透明にする」には、パレット256色のうち1枠を透明用に空けておく必要があります。

私は palettegen（GIFで使う256色を決める処理）に、reserve_transparent=0 という指定を入れていました。

「透明用の1枠をあらかじめ確保せず、最大256色を通常の色として使えるようにする」という意味です。

色数が増えれば綺麗になるだろう、という発想でした。

……はい。 透明用の空きが、無くなります。

空きが無いと、ffmpeg（動画を変換する定番のエンジン）はそのコマだけ諦めて、全画面を描き直します。

01-01. 「たまたま動いていた」のがいちばん厄介でした

面白い、というかこわいのはここからです。

ffmpeg は空き枠が無いとき、そのコマで一度も使われていない色を探して、代わりに透明用として借ります。 だから完全には壊れず、運が良ければ動く。

実際に自分の出力を1コマずつ解析してみたら、画面の大部分が書き換わるコマでは、余っていた枠の中央値が「1個」でした。

ずっと崖っぷちに立っていたわけです。 そして、風向き次第で落ちる。

01-02. 解像度を変えると、落ちたり落ちなかったり

同じ動画・同じfpsのまま、解像度だけ変えて測りました。

25%（360×360）のときだけ、149コマ中48コマが全画面描き直しになっていました。

そのコマは、正常なコマの9倍の重さ。 ファイルの8割を、この48コマが占めていました。

50%では落ちなくて、25%では落ちて、10%ではまた少しマシになる。

解像度の話に見えて、そうじゃなかったんです。

その解像度でたまたま出来上がったパレットが、256個のパレットを使い切ったかどうか。 それだけの問題でした。

Marieさんが「ほぼ半分」と書かれた条件は、ちょうどこの1枠が無くなる側だったのではないかと思います。

最新版は、パレット生成が最初から1枠を透明用に確保します。 どの解像度でも、149コマ中0コマ。一度も落ちません。

いま Movie to GIF を開いて同じ動画を変換すると、条件によっては前の3分の1くらいのサイズで出てきます。

何もしなくて大丈夫です。 ガードレールがついてます。

02. GIFの容量は、何で決まるのか

せっかく測定環境を作ったので、気になっていたことも全部測りました。 同じ動画で、約60本のGIFを作って比べています。

結論はシンプルでした。

素材が変わっても、解像度が変わっても、fpsが変わっても、この関係は崩れませんでした。

02-01. 解像度は効きます

縦横を半分（面積は4分の1）にすると、容量は−70%。

ほぼ面積に合わせて減ります。

02-02. fpsは思ったより効かなかった

あばけろ君🐸「fpsを半分にしたら、容量も半分になるんじゃないの？」

私も最初はそう思っていました。

30fpsを15fpsにして、実測は−20%です。

コマ数は半分になっているのに、容量は半分にならなかった。

間引いた分、1コマが重くなって相殺されたんですね。

いちばん分かりやすかったのが、この2つです。

360px / 15fps と、317px / 30fps。
どちらも約1.03MBでした。バイト単位でほぼ一致です。

つまり、30fpsを15fpsに落としてカクカクを受け入れて得られる削減は、30fpsのまま画像を12%だけ小さくするのと同じでした。

ちなみに30fpsから24fpsは−1〜2%。 ほぼ意味がありませんでした。

03. 素材によって、答えは変わります

ここが今回いちばん面白かったところです。

上の話は「背景が止まっていて、被写体だけ動く動画」での結果です。 三脚で固定して撮った、ビールの動画でした。

「画面全体が動く動画」でも同じことを測ってみたら、逆になりました。

同じfpsでも、素材が違うと減り方が変わります

画面全体が動く動画では、fpsを下げるとしっかり減ります。

まとめると、こうなります。

固定して撮った動画：解像度で削る。fpsは30のままでOK

カメラを振った動画・全画面アニメーション：fpsもちゃんと効く

どんな動画でも：いちばん効くのは「動く範囲を減らすこと」

最後のひとつが、実は最強です。

今回の実測でも、画素数が2.2倍ある「背景固定」の動画のほうが、容量は半分でした。

04. noteの上限は、以前に調べていました

実は、この話には前日譚があります。

以前、noteにGIFがどうしても貼れなくて、条件を1個ずつ変えながら地道に試した検証記事を書いていました。

関連記事👇

そのときの結論がこれです。

容量（MB）は犯人じゃなかったんですね。

で、今回パレットの件を調べていて気づいたんですが、この2つ、同じことを言っています。

noteが見ているのは「横×縦×コマ数」。つまり総画素数です。 そしてGIFの容量を決めているのも「変化した画素の数」でした。

どちらも、バイト数ではなく画素の数の話だったんですね。

別々に調べていた2つが、ここで繋がりました。

そう考えると、fpsを下げる意味もはっきりします。 容量のためじゃない。

コマ数を減らした分だけ、尺を伸ばせるから。

640×360なら、30fpsだと8.7秒でマス数の上限に届きます。 20fpsなら13秒。 15fpsなら17秒。

自分の記事では「640×360なら、なめらかさ（fps）は18〜20くらいまで」と書いていたんですが、なぜその辺りが良いのか、今回やっと裏側の理屈まで分かりました。

05. 測った結果を、アプリに入れました

05-01. おすすめ設定（貼り先を選ぶだけ）

設定タブの先頭に、貼り先ごとのボタンを4つ置きました。 押すと解像度とFPSが入ります。

幅は「その貼り先で実際に表示される幅」に合わせています。

それより大きく作っても表示時に縮むだけで、容量だけが面積なりに増えてしまうので。

05-02. 総コマ数の表示と、マス数の判定

「推定容量」の隣に、総コマ数を出すようにしました。

これは fps×秒数 なので、推定ではなく確定値です。

そして「横×縦×コマ数」が6000万を超えたら警告が出ます。

しかも「この解像度なら何秒まで」を一緒に出すようにしました。

noteに貼れないGIFを作ってから気づく、が無くなります。

05-03. 作り終わったあとの確認

完成したGIFの下に、実際のファイルサイズで「貼り先の上限に収まっています」を出すようにしました。

推定ではなく実測なので、ここは確実です。

06. この夏やっていた、それ以外のこと

パレットの話にたどり着く前にもコソコソとアプリの更新をしていました。

使ってくれた方が、いろいろ教えてくれたので。

アプリ内ブラウザ対応：LINEやYahoo!ブラウザから開くと、そもそも変換エンジンが起動できていませんでした。ちゃんと動画をGIFにできるように直しました。

保存の出口を3つに：「ダウンロード」「共有・端末に保存する」「長押し保存」。ダウンロードボタンを押せない事例がありました。端末やブラウザの制限が原因です。長押し保存の選択肢を作ったことで、解決しました。

noteへドラッグ＆ドロップ：できあがったGIFを、noteの投稿画面へそのまま放り込めます。保存してフォルダを開いて選び直す往復が消えます。

そして、それでもうまくいかなかったとき用に「環境情報をコピー」ボタン。

押して送ってもらえると、原因にたどり着く速さが段違いになります。 （コピーされるのは端末とブラウザの種類だけです）

おわりに

今回の修正、Marieさんの記事がなかったら、たぶん一生気づいていませんでした。
自分の手元では動いていたし、出来上がるGIFも見た目は普通だったので。

あばけろ君🐸はいつも「バグ報告はラブレターだね」と言っています。
今回のは、バグ報告ですらありませんでした。
ただ、自分の作ったものについて、条件を揃えて正直に書いてくださっただけです。

これ以上ないラブレターでした。
Marieさん、ありがとうございます。

ここまで読んでいただき、ありがとうございます。

▼ 触ってみてください👇

Movie to GIF（無料・登録なし・ブラウザの中だけで完結します）

「使ってみたよ！」の感想やシェアをして頂けると、製作の励みになります。🐸

「ここが使いにくい」「この端末で動かない」も大歓迎です。 LINE公式やXに送ってもらえたら、次のアップデートで直します。

「これどうしたら上手くいく？」など質問は質問箱からお気軽にどうぞ！ 喜んで答えます😉

不定期でAIやWebに関する情報や便利なアプリを紹介しています。 よければLINE公式の登録もお待ちしております✨

それではまた😌🐸