見出し画像

GIF Compressor v2 — 動画をNOTE用GIFに変換するブラウザツールをアップデート

以前作った「GIF Compressor 」をアップデートしました。

高性能化しすぎてNOTEの仕様に合わずGIF出力はできても、アップロードに失敗。

今回は、NOTEの仕様を調査して動く状態に修正。

更に、対応する動画ファイルも「MP4 / WebM / MKV」などに対応。

GIFを、ブラウザ上でNOTEに最適化されたGIFアニメーションに変換するツールへバージョンアップ。

これでやっと気軽にNOTE動画をアップできるように。

サーバーへのアップロードは一切なしで、すべてブラウザ内で完結します。

🔗 https://lain-lab.com/gif_compressor

動画:

OBS studioで録画したmkv動画を、GIF Compressor v2へドロップして、変換してアップろーしたGIFアニメ。

意外な事に、640x854pxという規格外っぽいサイズでもアップできてます。

NOTEのGIFアップロード、失敗しがち問題

NOTE記事にGIFアニメを貼ろうとして

「画像のアップロードに失敗しました」

を見たことがある人、多いと思います。

公式のヘルプには「20MBまで」としか書かれていませんが、実はファイルサイズだけでなくフレーム数が裏の制約になっています。

経験上、200フレーム以下なら安定してアップロードできます。

つまり、ただ圧縮するだけでは不十分で、FPSとフレーム数を正確にコントロールする必要があります。

できること

  • 動画 → GIF変換: MP4やWebMをドロップするだけでGIFに変換

  • GIF → GIF圧縮: 既存のGIFファイルの再圧縮にも対応

  • NOTEプリセット: ワンボタンでNOTE向け最適設定(640px / 10fps / 200フレーム以下)を適用

  • トリム機能: 動画の開始〜終了をスライダーで指定

  • フレーム数警告: NOTE上限を超えそうなとき事前に警告

使い方

1.ファイルをドラッグ&ドロップ(MP4 / WebM / GIF)

2.動画の場合、トリムスライダーで使いたい区間を指定

3.プリセットを選択(NOTE / BLOG / CUSTOM)

4.「EXECUTE」をクリック

5.完了したらダウンロード → NOTEに貼り付け

技術的な話

内部では2つのエンジンを組み合わせています。

  • gif.js — 動画のフレームを抽出してGIFにエンコード(Web Worker並列処理)

  • Gifsicle WASM — 生成されたGIFをさらにLossy圧縮&色数最適化

FFmpeg WASMという選択肢もありましたが、初回ロードだけで25MB以上あり、一部のホスティング環境では動作しない制約もあるため不採用。

ブラウザの標準的な動画デコード機能を活用する軽量な構成にしました。

詳しい技術仕様やプリセット一覧は詳細ページにまとめています。

🔗 https://lain-lab.com/featured/gif-compressor/

おわりに

元々は自分がNOTEにGIFを貼るために作ったツールです。

「動画をGIFに変換して、さらに別のツールで圧縮して、それでもNOTEに弾かれる」

という手間から解放されたかった。

同じ悩みを持っている方の役に立てば幸いです。

公開ツールリスト

🔗 https://lain-lab.com/tools/

いいなと思ったら応援しよう!