[2026/8/10]

[WEB App]GIF Compressor v2 - 動画→GIF変換＆NOTE最適化ツール

GIF Compressor v2

動画ファイル（MP4 / WebM）やGIFをブラウザ上で最適なGIFに変換するツールです。

gif.js（Web Worker GIFエンコーダ）と Gifsicle WASM（C言語製GIF最適化エンジン）のデュアルエンジン構成により、動画→GIF変換から最終最適化までをブラウザ内で完結します。

NOTE記事へのGIFアップロードに最適化されたNOTEプリセット（640px / 10fps / 200フレーム以下 / 20MB上限）を搭載。

スクリーンショット

動画

ツール

GIF Compressor v2 — 動画→GIF変換＆NOTE最適化

MP4/WebM/GIFをブラウザ上でNOTE対応GIFに変換。gif.js + Gifsicle WASMデュアルエンジン。完全ローカル処理。

lain-lab.com

特徴

動画→GIF変換

MP4やWebMなどの動画ファイルを直接GIFに変換できます。FFmpeg WASMのような重いライブラリ（25MB超）を使わず、ブラウザのネイティブ<video>デコーダ + Canvas + gif.jsの軽量な構成で実現しています。SharedArrayBuffer不要のため、あらゆる静的ホスティング環境で動作します。

NOTEプリセット

NOTEのGIFアップロード制限（公式：20MB / 非公式：200フレーム以下推奨）に合わせたワンボタンプリセットを搭載。フレーム数超過時は警告を表示します。

デュアルエンジン最適化

gif.js — 動画フレームをWeb Workerで並列GIFエンコード
Gifsicle WASM — フレーム差分最適化 + Lossy圧縮で最終仕上げ

GIF入力の場合はGifsicle WASMのみで処理し、既存GIFの再圧縮にも対応します。

完全ローカル処理

すべての処理はブラウザ内で完結。動画データもGIFデータも一切サーバーに送信されません。

使い方

ファイルをドロップ（MP4 / WebM / GIF）

GIF Compressor v2: 1.ファイルをドロップ（MP4 / WebM / GIF）

動画の場合：トリムスライダーで区間を指定

GIF Compressor v2: 2.動画の場合：トリムスライダーで区間を指定

プリセットを選択（NOTE / BLOG / CUSTOM）

GIF Compressor v2: 3.プリセットを選択（NOTE / BLOG / CUSTOM）

EXECUTEをクリック

完了後、ダウンロード

フレーム抽出 → GIFエンコード → Gifsicle最適化の各段階でリアルタイムにプログレスを表示します。

プリセット一覧

プリセット	横幅	FPS	最大フレーム	用途
NOTE	640px	10fps	200f	NOTE記事投稿
BLOG	800px	15fps	450f	ブログ・技術記事
CUSTOM	自由	自由	制限なし	詳細設定

技術スタック

gif.js — Web Worker並列GIFエンコーダ（フレーム抽出・GIF生成）
Gifsicle WASM — C言語製GIF最適化エンジンのWebAssembly移植版（Lossy圧縮・色数最適化）
HTML / CSS / JavaScript — 単一ファイルで完結、Astroページとしてデプロイ
CDN依存 — gif.js (cloudflare) + gifsicle-wasm-browser (jsdelivr) の2つのみ

処理パイプライン

[動画入力] MP4/WebM
  → <video>ネイティブデコード
  → Canvasフレーム描画 (指定FPSでseek)
  → gif.js GIFエンコード (Web Worker並列)
  → Gifsicle WASM 最終最適化 (Lossy + 色数)
  → [GIF出力]

[GIF入力]
  → Gifsicle WASM 最適化 (リサイズ + Lossy + 色数)
  → [GIF出力]

開発の経緯

v1はGIF→GIF圧縮のみのシンプルなGifsicle WASMラッパーでした。

NOTE記事にGIFを投稿する際、動画→GIF変換を別ツールで行ってからGifsicle WASMで圧縮するという2段階の手間が発生していました。さらにNOTEのアップロード制限（ファイルサイズだけでなくフレーム数が裏のキラー制約）に対応するには、FPSとフレーム数を正確にコントロールする必要がありました。

v2ではgif.jsを組み合わせることでFFmpeg WASMなしの軽量な動画→GIF変換を実現し、NOTEプリセットでワンボタン最適化を可能にしました。

[JavaScript] 高精度GIF圧縮＆リサイザーの実装 Gifsicle WASMで80%軽量化を実現 // PROTOCOL.LAIN

純粋なJavaScriptによるGIFエンコードでのファイルサイズ増大やノイズ発生問題を、WebAssembly化されたC言語製エンジン「Gifsicle」と動的プログレスUIの実装により解決したプロセスを詳しく解説します。