我们团队的产品文档站需要在每次版本发布时自动生成功能演示GIF。之前是手动用PS做的,每次发版都要花半天时间。
这篇记录一下我们最终选定的方案和参数调优过程。
需求
- 每次发版有15-30个功能演示视频(屏幕录制,1080p)
- 需要转成GIF放在文档站上
- 要求:文件尽量小(网页加载快)、画面清晰、流畅度够用
- 最好能批量处理,减少人工操作
工具选型
考虑过三个方案:
- 写FFmpeg脚本:灵活但每次要手动调参数,而且palettegen+paletteuse的滤镜链写起来比较长
- ImageMagick:转换质量不如FFmpeg的palette方案
- 批量视频转GIF工具:基于FFmpeg,GUI操作,支持批量+并行
最终选了方案3。虽然是GUI工具,但参数够用,而且省去了写脚本维护的成本。
参数调优过程
目标:在文件大小和画面质量之间找到最优平衡点。
第一轮:宽度对比
固定帧率10、帧间隔0.1秒、颜色256、抖动bayer,只改宽度:
| 宽度 | 平均文件大小 | 网页加载体验 | 画面清晰度 |
|---|---|---|---|
| 720px | 8.2MB | 偏慢 | 很清晰 |
| 480px | 3.1MB | 可接受 | 清晰 |
| 360px | 1.6MB | 快 | 够用 |
| 240px | 0.7MB | 很快 | 偏小 |
文档站的内容区宽度是800px,GIF实际显示宽度大概500px左右。选480px刚好,再大了文件太大,再小了放大后会糊。
第二轮:帧率对比
固定宽度480、帧间隔0.1秒:
| 帧率 | 总帧数(5秒) | 文件大小 | 流畅度 |
|---|---|---|---|
| 5 | 25 | 1.5MB | 略卡 |
| 8 | 40 | 2.3MB | 可接受 |
| 10 | 50 | 3.1MB | 流畅 |
| 15 | 75 | 4.6MB | 很流畅 |
帧率8是一个拐点------从5到8流畅度提升明显,从8到10提升不大但文件增加了35%。我们最终选了8。
第三轮:颜色数量
屏幕录制的画面颜色相对简单(主要是UI界面),不需要256色:
| 颜色 | 文件大小 | 色彩表现 |
|---|---|---|
| 256 | 2.3MB | 完美 |
| 128 | 1.9MB | 几乎无差异 |
| 64 | 1.4MB | 渐变区域有色带 |
屏幕录制内容用128色就够了。如果是实拍视频(色彩丰富),建议还是256色。
最终配置
帧率:8
宽度:480
帧间隔:0.1秒
起始时间:0
时长:0(全部)
颜色:128
抖动:bayer
并行数:4
每次发版把演示视频丢进去跑一遍,15-30个视频大概5-10分钟搞定。
补充:智能并行策略
工具会根据文件大小自动调整实际并行数。大文件(>500MB)会自动降到2线程,避免IO瓶颈。屏幕录制的视频一般不大,所以4线程跑满没问题。
支持的输入格式:MP4、AVI、MOV、MKV、FLV、WMV、WebM、TS、M4V、3GP、MPEG、MPG。
