用 Kap + FFmpeg 把录屏转成小体积 GIF：产品操作演示图制作实践

在写产品文档、测试报告、操作说明时，经常需要放一段"操作演示动图"。

相比静态截图，GIF 能更直观地展示完整操作路径，比如：

点击入口
打开弹窗
填写表单
提交申请
查看结果

但实际使用时很容易遇到一个问题：录出来的 GIF 文件太大。

比如一段 30 秒左右的产品操作录屏，如果录制区域过大、帧率过高，GIF 可能达到十几 MB 甚至几十 MB，放到文档、IM、Wiki 里都不方便。

本文整理一套比较实用的工作流：

text 复制代码

Kap 录屏
→ 导出 GIF / MP4
→ FFmpeg 查看属性
→ 裁剪时长、降低帧率、缩小尺寸
→ gifsicle 二次压缩
→ 必要时遮挡敏感信息

一、推荐工具

1. Kap

Kap 是 Mac 上常用的轻量录屏工具，适合录制产品操作演示。

安装命令：

bash 复制代码

brew install --cask kap

打开：

bash 复制代码

open -a Kap

首次使用需要开启屏幕录制权限：

text 复制代码

系统设置 → 隐私与安全性 → 屏幕录制 → 开启 Kap

开启权限后，建议退出 Kap 再重新打开。

2. FFmpeg

FFmpeg 用于查看视频 / GIF 属性、裁剪、缩放、降帧率、转 GIF 等。

安装命令：

bash 复制代码

brew install ffmpeg

查看是否安装成功：

bash 复制代码

ffmpeg -version
ffprobe -version

3. gifsicle

gifsicle 用于进一步优化和压缩 GIF。

安装命令：

bash 复制代码

brew install gifsicle

二、Kap 基础配置

在正式录制前，建议先配置两个基础项：

默认存储路径
录制快捷键

这样后续录屏、查找文件、批量压缩都会更方便。

1. 配置默认存储路径

打开 Kap 后，进入设置：

text 复制代码

Kap → Preferences / Settings → Export / Save Location

建议设置一个固定目录，例如：

bash 复制代码

~/Downloads/screenshots

如果目录不存在，可以先创建：

bash 复制代码

mkdir -p ~/Downloads/screenshots

这样后续所有录屏文件都统一放在该目录下，方便用 FFmpeg 批量处理。

查看目录文件：

bash 复制代码

ls -lh ~/Downloads/screenshots

后续命令里可以统一使用类似路径：

bash 复制代码

~/Downloads/screenshots/demo.gif
~/Downloads/screenshots/demo.mp4

2. 配置录制快捷键

进入 Kap 设置：

text 复制代码

Kap → Preferences / Settings → Shortcuts

建议把开始录制快捷键设置为：

text 复制代码

Command + Shift + 6

后续录制产品操作演示时，就可以直接通过快捷键启动录制，不需要每次点击菜单栏图标。

推荐使用方式：

text 复制代码

Command + Shift + 6
→ 框选录制区域
→ 开始录制
→ 完成操作
→ 停止录制
→ 导出 GIF / MP4

如果录制过程中找不到停止按钮，可以优先查看 Mac 顶部菜单栏右侧的 Kap 图标，选择：

text 复制代码

Stop Recording

也可以尝试系统录屏停止快捷键：

text 复制代码

Command + Control + Esc

3. 推荐配置

配置项	建议值
存储路径	`~/Downloads/screenshots`
录制快捷键	`Command + Shift + 6`
录制方式	区域录制
导出格式	优先 MP4，必要时转 GIF
录制区域	只录核心操作区域

这样做的好处是：

text 复制代码

文件位置固定
命令处理方便
录制入口统一
不容易误录全屏
便于后续压缩和脱敏

三、Kap 录屏建议

录制产品操作 GIF 时，不建议直接全屏录制。

GIF 文件大小主要受以下因素影响：

因素	影响
录制区域越大	文件越大
时长越长	文件越大
帧率越高	文件越大
页面变化越多	文件越大
颜色越丰富	文件越大

建议录制参数：

text 复制代码

录制区域：只录核心操作区域
录制时长：10～20 秒
帧率：8～12 fps
宽度：800～1200px
格式：优先 MP4，必要时再转 GIF

如果只是放到文档里展示，很多场景下 MP4 比 GIF 更合适，因为 MP4 体积更小、清晰度更高。

如果文档系统或 IM 工具明确要求动图，再导出 GIF。

四、查看 GIF 属性

拿到一个 GIF 后，不建议马上压缩，最好先看一下它的基本属性。

命令：

bash 复制代码

ffprobe -v error -show_format -show_streams ~/Downloads/screenshots/demo.gif

重点关注这些字段：

text 复制代码

width=3024
height=1564
r_frame_rate=30/1
duration=31.430000
nb_frames=943
size=19799342
format_name=gif

字段说明：

字段	含义
`width / height`	GIF 宽高
`r_frame_rate`	帧率
`duration`	时长
`nb_frames`	帧数
`size`	文件大小，单位是字节
`format_name`	文件真实格式

也可以用下面命令确认文件真实格式：

bash 复制代码

file ~/Downloads/screenshots/demo.gif

如果是真 GIF，通常会看到：

text 复制代码

GIF image data

如果只是 PNG 改了 .gif 后缀，可能会显示 PNG 相关信息。

五、为什么 GIF 会很大

假设一个 GIF 属性如下：

text 复制代码

尺寸：3024 × 1564
时长：31.43 秒
帧率：约 30 fps
帧数：943 帧
大小：约 19.8 MB

这类 GIF 体积大的原因很明确：

录制尺寸过大；
录制时间偏长；
帧率过高；
帧数太多；
GIF 本身压缩效率不如 MP4。

所以优化方向也很明确：

text 复制代码

降尺寸
降帧率
截短时长
减少颜色
有损压缩
必要时改用 MP4

六、无损优化：安全，但效果有限

可以先试一下无损优化：

bash 复制代码

gifsicle -O3 ~/Downloads/screenshots/demo.gif \
-o ~/Downloads/screenshots/demo_opt.gif

查看大小：

bash 复制代码

ls -lh ~/Downloads/screenshots/demo*.gif

但要注意：无损优化通常只能减少少量体积。

如果原 GIF 本身尺寸大、时长长、帧数多，无损优化效果可能不明显。比如从 19.8MB 降到 19.6MB，这是正常现象。

想要明显变小，必须降尺寸、降帧率或截短时长。

七、推荐压缩方式：FFmpeg 调色板法

直接用 FFmpeg 从 GIF 再转 GIF，有时会反而变大。

更推荐使用 GIF 调色板，也就是：

text 复制代码

palettegen + paletteuse

推荐命令：

bash 复制代码

ffmpeg -y -i ~/Downloads/screenshots/demo.gif \
-vf "fps=8,scale=900:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" \
-loop 0 ~/Downloads/screenshots/demo_900_8fps.gif

参数说明：

参数	说明
`fps=8`	将帧率降到 8 fps
`scale=900:-1`	宽度缩放到 900px，高度等比缩放
`palettegen`	生成 GIF 调色板
`max_colors=128`	限制颜色数量，减少体积
`paletteuse`	使用调色板生成 GIF
`dither=bayer`	使用抖动算法
`bayer_scale=5`	控制抖动强度
`-loop 0`	GIF 无限循环

这条命令通常比直接转 GIF 更稳定，也更容易压小。

八、截取关键片段再压缩

如果原始 GIF 有 30 秒以上，建议先截取核心操作片段。

例如，只保留第 3 秒到第 18 秒：

bash 复制代码

ffmpeg -y -ss 00:00:03 -to 00:00:18 \
-i ~/Downloads/screenshots/demo.gif \
-vf "fps=8,scale=900:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" \
-loop 0 ~/Downloads/screenshots/demo_cut_900.gif

参数说明：

参数	说明
`-ss 00:00:03`	从第 3 秒开始
`-to 00:00:18`	到第 18 秒结束
`fps=8`	降低帧率
`scale=900:-1`	缩小宽度
`palettegen + paletteuse`	正确生成 GIF

这通常是最有效的压缩方式，因为它同时减少了：

text 复制代码

时长
帧数
尺寸
颜色数量

九、进一步有损压缩

如果压缩后还是偏大，可以继续用 gifsicle 做有损压缩：

bash 复制代码

gifsicle -O3 --lossy=80 \
~/Downloads/screenshots/demo_cut_900.gif \
-o ~/Downloads/screenshots/demo_final.gif

如果画质还能接受，可以提高压缩强度：

bash 复制代码

gifsicle -O3 --lossy=100 \
~/Downloads/screenshots/demo_cut_900.gif \
-o ~/Downloads/screenshots/demo_final_lossy100.gif

常用建议：

参数	说明
`--lossy=40`	轻度压缩，画质较好
`--lossy=60`	均衡
`--lossy=80`	体积更小
`--lossy=100`	压缩更明显，画质会下降

如果压缩后文字已经看不清，就需要降低压缩强度，或者把 scale=900 调大到 scale=1000、scale=1200。

十、隐藏敏感信息

产品操作录屏里经常会出现一些敏感信息，例如：

text 复制代码

用户姓名
头像
账号
邮箱
手机号
内部项目名
接口地址
密钥信息
组织名称
真实业务数据
浏览器书签栏
通知弹窗

录制前最好先脱敏。如果已经录好了，也可以用 FFmpeg 遮挡。

1. 用白色矩形遮挡

假设要遮挡右上角一块区域：

bash 复制代码

ffmpeg -i ~/Downloads/screenshots/demo.gif \
-vf "drawbox=x=2500:y=20:w=150:h=90:color=white@1:t=fill,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
-loop 0 ~/Downloads/screenshots/demo_mask.gif

参数说明：

参数	说明
`x=2500`	遮挡区域距离左侧的位置
`y=20`	遮挡区域距离顶部的位置
`w=150`	遮挡宽度
`h=90`	遮挡高度
`color=white@1`	白色不透明遮挡
`t=fill`	填充矩形

如果页面背景是深色，可以改成：

text 复制代码

color=black@1

2. 基于压缩后的 GIF 遮挡

如果 GIF 已经缩放到 900px 宽，坐标也要按比例缩小，不能继续用原始大图坐标。

示例：

bash 复制代码

ffmpeg -i ~/Downloads/screenshots/demo_cut_900.gif \
-vf "drawbox=x=750:y=12:w=150:h=45:color=white@1:t=fill,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
-loop 0 ~/Downloads/screenshots/demo_cut_900_mask.gif

注意：遮挡区域需要根据实际画面微调。

3. 模糊敏感区域

如果不想用白块，也可以做局部模糊：

bash 复制代码

ffmpeg -i ~/Downloads/screenshots/demo.gif \
-filter_complex "[0:v]split=2[bg][fg];[fg]crop=450:90:2500:20,boxblur=10[blur];[bg][blur]overlay=2500:20,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
-loop 0 ~/Downloads/screenshots/demo_blur.gif

这条命令的逻辑是：

text 复制代码

裁出敏感区域
→ 做模糊
→ 贴回原位置
→ 重新生成 GIF

十一、脱敏检查清单

发布前建议检查：

检查项	是否需要处理
真实姓名	需要遮挡
头像	视情况遮挡
手机号 / 邮箱	必须遮挡
密钥 / Token	必须遮挡
内部系统地址	必须遮挡
项目名称	视发布范围处理
客户名称	必须遮挡
订单号 / 审批号	视情况遮挡
真实业务数据	建议替换为测试数据
浏览器书签栏	建议不要录入
系统通知	建议关闭
IM 弹窗	建议关闭

最好的方式不是后期遮挡，而是录制前就准备好脱敏环境：

text 复制代码

使用测试账号
使用测试数据
隐藏浏览器书签栏
关闭通知弹窗
只录核心区域
避免录到右上角账号信息
避免录到真实密钥、Token、URL

十二、推荐完整流程

最终比较推荐的流程是：

text 复制代码

1. Kap 配置固定存储路径
2. 设置快捷键 Command + Shift + 6
3. 使用测试账号和测试数据
4. 框选核心操作区域
5. 录制 10～20 秒操作流程
6. 导出 MP4 或 GIF
7. 使用 ffprobe 查看属性
8. 截取关键时间段
9. 降帧率、缩小尺寸
10. 使用 palettegen + paletteuse 生成 GIF
11. 使用 gifsicle 二次压缩
12. 遮挡敏感信息
13. 检查最终文件大小和画面效果

如果只是写文档，推荐优先使用：

text 复制代码

MP4

如果必须使用动图，再生成 GIF。

十三、常用命令合集

1. 创建录屏目录

bash 复制代码

mkdir -p ~/Downloads/screenshots

2. 查看 GIF 属性

bash 复制代码

ffprobe -v error -show_format -show_streams ~/Downloads/screenshots/demo.gif

3. 查看文件真实格式

bash 复制代码

file ~/Downloads/screenshots/demo.gif

4. 查看文件大小

bash 复制代码

ls -lh ~/Downloads/screenshots/demo*.gif

5. 无损优化

bash 复制代码

gifsicle -O3 ~/Downloads/screenshots/demo.gif \
-o ~/Downloads/screenshots/demo_opt.gif

6. 压缩完整 GIF

bash 复制代码

ffmpeg -y -i ~/Downloads/screenshots/demo.gif \
-vf "fps=8,scale=900:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" \
-loop 0 ~/Downloads/screenshots/demo_900_8fps.gif

7. 截取并压缩

bash 复制代码

ffmpeg -y -ss 00:00:03 -to 00:00:18 \
-i ~/Downloads/screenshots/demo.gif \
-vf "fps=8,scale=900:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" \
-loop 0 ~/Downloads/screenshots/demo_cut_900.gif

8. 有损压缩

bash 复制代码

gifsicle -O3 --lossy=80 \
~/Downloads/screenshots/demo_cut_900.gif \
-o ~/Downloads/screenshots/demo_final.gif

9. 遮挡右上角敏感信息

bash 复制代码

ffmpeg -i ~/Downloads/screenshots/demo_cut_900.gif \
-vf "drawbox=x=750:y=12:w=150:h=45:color=white@1:t=fill,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
-loop 0 ~/Downloads/screenshots/demo_cut_900_mask.gif

10. 模糊右上角敏感信息

bash 复制代码

ffmpeg -i ~/Downloads/screenshots/demo.gif \
-filter_complex "[0:v]split=2[bg][fg];[fg]crop=450:90:2500:20,boxblur=10[blur];[bg][blur]overlay=2500:20,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
-loop 0 ~/Downloads/screenshots/demo_blur.gif

11. 一条命令生成较小 GIF

适合直接把较大的 GIF 压到文档可用级别：

bash 复制代码

ffmpeg -y -ss 00:00:03 -to 00:00:18 \
-i ~/Downloads/screenshots/demo.gif \
-vf "fps=8,scale=900:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" \
-loop 0 ~/Downloads/screenshots/demo_final.gif

十四、参数怎么调

目标	调整方式
文件还是太大	`scale=900` 改成 `scale=720`
文件还是太大	`fps=8` 改成 `fps=6`
文件还是太大	缩短 `-ss` 到 `-to` 的时间范围
动作太卡	`fps=8` 改成 `fps=10` 或 `fps=12`
文字看不清	`scale=900` 改成 `scale=1000` 或 `scale=1200`
画质太差	`max_colors=128` 改成 `max_colors=256`
画质太差	`--lossy=80` 改成 `--lossy=40`
遮挡没盖准	调整 `drawbox` 的 `x/y/w/h`

十五、经验总结

产品操作演示 GIF 的关键不是"录得越清晰越好"，而是：

text 复制代码

看得懂
文件小
不泄露信息
能放进文档
能快速传播

实际使用中，建议优先控制这几个参数：

text 复制代码

宽度：900px 左右
帧率：8 fps 左右
时长：15 秒以内
颜色：128 色左右
敏感信息：提前脱敏或后期遮挡

如果最终 GIF 仍然超过 10MB，不建议继续强压 GIF，可以考虑改用 MP4。

对于产品说明、测试报告、Wiki 文档来说，MP4 通常是更好的选择；只有在平台不方便播放视频、或者确实需要自动循环展示时，再使用 GIF。