為什麼網頁 GIF 又清晰又小？專業壓縮工具與導出流程揭秘

核心差異

普通錄屏工具（如 LICEcap、ScreenToGif）默認採用無損逐幀編碼，色表固定 256 色、無幀間優化，導致體積巨大。專業流程通過幀差異壓縮、全局色表優化、幀率控制、有損量化 實現高壓縮比。

專業導出工具鏈

1. After Effects 導入視頻 → 裁剪/調色 → File → Export → Add to Render Queue → Format: Animated GIF（需安裝 GifGun 腳本或使用 Bodymovin 導出 JSON 再轉 GIF）。
2. Photoshop：File → Export → Save for Web (Legacy) → 選 GIF → 關鍵設置：
   • Colors：128/64（視內容複雜度）
   • Dither：Diffusion 88% 平衡質量與體積
   • Lossy：10~30 允許有損量化
   • Frame Delay：統一設置或按幀差異優化
3. 命令行神器：
   • gifsicle -O3 --lossy=30 --colors 128 input.gif -o output.gif（無損優化 + 有損量化）
   • ffmpeg -i input.mp4 -vf "fps=15,scale=480:-1:flags=lanczos,palettegen" palette.png && ffmpeg -i input.mp4 -i palette.png -lavfi "fps=15,scale=480:-1:flags=lanczos [x]; [x][1:v] paletteuse=dither=bayer:bayer_scale=5" output.gif（雙通道調色板 + Bayer 抖動）

關鍵優化參數對照表

最佳實踐流程

1. 錄製原始視頻（MP4/H.264，高質量）。
2. FFmpeg 雙通道生成優化調色板。
3. Gifsicle 無損優化（合併重複幀、移除冗余數據）。
4. 最終檢視：在 Chrome 拖入播放，確認無明顯色帶、閃爍。

結語

「清晰且小」的秘訣是捨棄無關視覺信息：降低幀率、減少色數、允許有損量化、啟用幀差異壓縮。工具不重要，參數組合才是核心。