做产品演示要录屏转 GIF，发微信群要把搞笑片段做成表情包，写技术文档要展示操作步骤，GitHub README 里嵌入效果预览——视频转 GIF 是高频需求。但直接转出来的 GIF 动辄几十 MB，传不上去也加载不动。
关键在于三个参数的平衡：宽度、帧率、时长。调好了，同样的内容可以从 30MB 压到 2MB，画面依然清晰流畅。这篇文章从原理讲起，教你掌握这三个旋钮的调法。
GIF 格式的先天限制
在调参数之前，先理解 GIF 格式本身的特点：GIF 最早诞生于 1987 年，比 JPG 还老。它的设计初衷是网页上的简单动画，不是视频替代品。所以它有几个天然限制：最多只支持 256 色（而 MP4 可以表现 1600 万色）；不支持半透明（只有全透明和不透明）；没有音频轨道；压缩算法（LZW）效率远低于现代视频编码。
这意味着 GIF 天生就是"大体积、低画质"的格式。你没法让它变得跟 MP4 一样轻巧，但可以通过调参数把浪费砍掉。
核心原则：GIF 文件大小公式
GIF 大小 ≈ 宽度 × 高度 × 帧数 × 颜色复杂度。每个变量减半，文件就能缩小约一半。所以优化思路很明确：砍宽度、砍帧率、砍时长。下面逐个展开。
三个参数怎么调
宽度：480px 是黄金区间
GIF 的用途决定了它不需要 1080p。大多数场景下 480px 宽度足够：聊天窗口、文档嵌入、博客配图都不会超过这个尺寸。如果是纯操作演示（文字和按钮为主），320px 也够用。只有需要展示细节的截图类 GIF 才需要 640px 以上。
宽度对文件大小的影响是平方级的——宽度从 800 降到 400，像素总数变成四分之一（宽度减半，高度等比例也减半），文件大小直接砍掉 75%。这是性价比最高的优化手段。
320px — 微信/QQ 聊天表情包、Slack 贴图，小尺寸优先
480px — 博客配图、技术文档、邮件嵌入，通用推荐值
640px — 需要看清文字细节的 UI 录屏、产品演示
800px+ — 除非有特殊需求，否则不推荐。体积会非常大
帧率：10-12fps 刚好够
人眼对动画流畅度的感知阈值大约在 12fps。低于 8fps 会明显感觉卡顿，但超过 15fps 几乎看不出区别，文件却大了很多。帧率从 24fps 降到 10fps，帧数少了 58%，文件大小也接近减半。
8fps — 幻灯片式展示、文字动画、加载效果
10fps — 操作演示、UI 交互录屏（推荐默认值）
12fps — 需要较流畅动作的场景
15fps+ — 仅在真人动作或快速运动场景使用，体积代价大
一个常见误区是觉得"帧率越高越好"。实际上，对于操作演示类 GIF，鼠标在两个按钮之间移动的过程并不重要，重要的是点击前后的状态变化。10fps 完全足以传达这些信息。
时长：控制在 5 秒以内
GIF 不是视频替代品。超过 5 秒的内容建议直接用视频格式（MP4 体积更小且支持声音）。如果必须做长 GIF，务必把宽度和帧率调低。10 秒以上的 GIF 几乎一定会超过 5MB，大部分平台（微信、钉钉、论坛）都会拒绝上传或自动压缩到面目全非。
如果你的演示步骤确实多，考虑拆成多个 GIF，每个展示一个步骤。这样每个 GIF 都足够小，加载也更快。
实操：用视频工具箱转 GIF
视频转 GIF 模式开始转换，工具会先提取最优 256 色调色盘，再编码每一帧整个过程在浏览器本地完成，视频文件不会上传到任何服务器。这也意味着处理速度取决于你电脑的性能——一段 5 秒的视频通常 3-8 秒就能转完。
效果对比：不同参数下的文件大小
同一段 10 秒、1080p 的录屏视频，不同参数下的 GIF 大小差异：
| 宽度 | 帧率 | 时长 | 估算大小 | 适用场景 |
|---|---|---|---|---|
| 1080px | 24fps | 10s | ~40-80MB | 不可用，几乎所有平台拒绝 |
| 800px | 24fps | 10s | ~25-40MB | 不推荐，体积太大 |
| 640px | 15fps | 10s | ~10-18MB | 勉强可用，加载慢 |
| 480px | 10fps | 5s | ~2-5MB | 推荐设置，平衡最优 |
| 320px | 8fps | 3s | ~0.5-1.5MB | 聊天表情包、论坛头像 |
从表中可以看出，480px + 10fps + 5s 是性价比最高的组合。2-5MB 的 GIF 在绝大多数平台都能正常上传和显示，画面质量也足够清晰。
进阶技巧
调色盘优化：为什么工具生成的比在线转换好
视频工具箱默认使用两步法生成 GIF：第一步从视频帧中统计分析，提取出最优的 256 色调色盘；第二步用这个定制调色盘编码每一帧。这比通用调色盘（很多在线工具的做法）颜色质量好很多，尤其是渐变区域、肤色、天空等场景，不会出现明显的色块和抖动。
先裁剪再转 GIF
如果只需要视频的某个片段，可以先用 视频裁剪 功能把片段截出来，再切到 视频转 GIF 处理。这样做有两个好处：一是裁剪后的小文件处理速度更快；二是你可以精确控制起止时间，避免 GIF 开头和结尾有多余的空白帧。
内容越简单，压缩越好
GIF 的 LZW 压缩算法对大面积相同颜色的区域压缩效率很高。这意味着：纯 UI 录屏（白色背景、少量按钮）的 GIF 比实景视频（复杂纹理、不断变化的画面）小得多。如果你要做操作演示，可以把不需要展示的区域裁掉，或者关闭不必要的 UI 元素，减少画面复杂度。
循环设置：无限循环 vs 播放一次
GIF 默认是无限循环播放的。但在某些场景下（比如操作步骤演示），你可能希望它只播放一次或循环几次后停止。视频工具箱可以设置循环次数——0 表示无限循环，1 表示只播一次。
GIF vs 短视频：什么时候该用哪个
很多人纠结"到底该转 GIF 还是直接用视频"。这里给一个简单的判断标准：
| 场景 | 推荐格式 | 原因 |
|---|---|---|
| GitHub README | GIF | Markdown 原生支持图片，不支持视频嵌入 |
| 技术文档/博客 | GIF | 自动播放、无需点击、兼容所有浏览器 |
| 微信聊天/表情包 | GIF | 直接发送，对方无需点开 |
| 邮件嵌入 | GIF | 大部分邮件客户端支持 GIF，不支持视频 |
| 网站产品页 | MP4/WebM | 视频体积小 5-10 倍，支持声音，画质更好 |
| 微信朋友圈/公众号 | MP4 | 平台原生支持视频，GIF 会被压缩 |
| 抖音/B站 | MP4 | 视频平台，GIF 不适用 |
| 超过 10 秒的内容 | MP4 | 长 GIF 体积太大，不实际 |
简单来说：需要自动循环播放、无需用户交互的短场景用 GIF；有声音、较长、画质要求高的用视频。
常见问题
为什么转出来的 GIF 颜色有色块？
GIF 只支持 256 色。如果原视频有丰富的渐变色（比如日落天空、人脸皮肤），256 色不够表现，就会出现色块（banding）。解决方法是启用 dither（抖动）模式——用像素点的分布来模拟中间色。视频工具箱默认启用了这个功能。如果颜色还是不理想，考虑降低宽度（减少需要表现的像素总数）。
转出来有白边/黑边怎么办？
这通常是因为原视频的分辨率比例和输出宽度不匹配。解决方法：先用视频裁剪功能把不需要的边缘裁掉，再转 GIF。或者调整输出宽度，让高度是偶数（有些编码器要求高度为偶数）。
手机上能用吗？
可以。视频工具箱是纯浏览器端工具，手机浏览器也能打开。不过 FFmpeg.wasm 在手机上的处理速度较慢（大约是电脑的 3-5 倍时间），且手机内存有限，建议只处理 5 秒以内、480px 宽度以下的视频。
生成的 GIF 怎么进一步压缩？
如果转出来的 GIF 还是偏大，可以：降低宽度（最有效）；降低帧率；缩短时长；减少颜色数（从 256 降到 128 或 64，画质会有损失）。工具支持这些参数的自由组合。