GIF Suite：免费一站式 GIF 工具包

什么是 GIF Suite？

GIF Suite 是一个六标签的工具包,把处理动画 GIF 时通常需要的功能都集成在一处:从视频里裁出片段、把设计帧拼成动画、把旧 GIF 转成 MP4、从 GIF 里抽出单独的帧、把过大的 GIF 压成合理的尺寸。我做这个工具是因为以前光为了做一个 Slack 反应 GIF 就要开三个不同的标签页。所有处理通过 FFmpeg WASM 在本地运行,所以一段 200 MB 的屏幕录像就在你的电脑里待着,套件慢慢嚼完它。

主要功能

• 两遍调色板编码的视频转 GIF — 先跑 palettegen 构建最优调色板,然后用你选的抖动跑 paletteuse 完成最终编码。结果比单遍工具明显干净,尤其在渐变和肤色上。
• 帧率、片段、宽度控制 — 选起止时间精确到 0.1 秒,5 到 30 FPS 选择,输出宽度从 160 到 1280 px 的滑块,以 40 px 为步长。高度自动以 Lanczos 重采样缩放。
• 图片序列用的 GIF Maker — 拖入 PNG、JPG 或 WebP 帧(最多 50 个),用上下箭头调整顺序,以毫秒为单位设置每帧时间。Apply to All 按钮把默认延迟一次性应用到每一帧。
• GIF 转视频 — 把任何 GIF 转成 MP4 或 WebM,质量分 Low (CRF 30)、Medium (CRF 23)、High (CRF 18),编码前可配置源 GIF 的循环次数。
• GIF 转图片提取 — 把 GIF 的每一帧抽出为 PNG、JPG 或 WebP,可选帧范围。同一个标签可以用提取的帧生成 sprite sheet,列数可调。
• 过大 GIF 用的优化器 — 一遍处理里组合颜色减少(16-256)、有损压缩(0-200)、跳帧、缩放。结果面板并排显示原始大小、优化后大小、节省百分比。
• 静态图片的抖动标签 — 用 4-256 色应用 Floyd-Steinberg、Atkinson、Bayer 或无抖动量化,下载为 PNG。在投入完整 GIF 编码之前,用来预览算法效果很方便。
• 重型标签的批量模式 — Video to GIF、GIF to Images、Optimizer 都支持多文件批量处理,最后用一个 ZIP 下载。
• 文件最大 500 MB — 视频输入最大 500 MB;GIF 输入最大 100 MB;单张图片最大 50 MB。

如何使用 GIF Suite

步骤 1:选一个标签

顶上有六个标签:Video to GIF、GIF Maker、GIF to Video、GIF to Images、Optimizer 和 Dither。每个都是独立的工具,控件和拖放区跟着标签换。最常见的起点是 Video to GIF。

步骤 2:视频转 GIF — 裁剪和配置

把视频拖到拖放区(MP4、WebM、MOV、AVI、MKV 都接受)。视频预览带帧控件出现。以秒为单位输入 Start Time 和 End Time — 两者都接受到 0.1 的小数。输入下面,Duration 标签随选中片段的长度更新。

GIF Settings 卡片里是最重要的控件:

• Frame Rate — 5、10、15、20、24、30 FPS 的下拉。15 FPS 是反应 GIF 的甜点。
• Width — 160 到 1280 px 的滑块。聊天客户端用 480 px 是不错的默认值。
• Colors — 16 到 256 以 16 为步长的滑块。在 GIF 分辨率下,128 通常和 256 不可区分。
• Loop forever / Play once — 颜色滑块下面的复选框。

点 Create GIF。两遍 FFmpeg 跑起来,结果带文件名和大小出现在预览面板里,Download 把它存到你的电脑。

步骤 3:GIF Maker — 拼帧

切到 GIF Maker。拖入两张或更多图片。每个帧变成一张卡片,带缩略图、原始文件名、毫秒延迟输入和上下 chevron 用来调序。顶上的默认延迟字段加 Apply to All 按钮把统一延迟应用到所有帧。用滑块设输出 Width,然后点 Create GIF from Images。少于 2 帧时工具拒绝运行,显示 "Add at least 2 images to create a GIF" 提示。

步骤 4:GIF 转视频 — 让旧 GIF 现代化

GIF to Video 标签是给那些对用途来说太重的 GIF 用的 — 营销页的主图动画、应用内教程之类。上传 .gif 文件,选 MP4 或 WebM,设 Loop Count(1-100,编码前重复源),选 Low、Medium 或 High 质量。Convert to Video 通常做出比源 GIF 小 5-10 倍的视频。

步骤 5:优化器 — 压缩过大的 GIF

对于太大的 GIF(README 装不下、邮件发不动),拖到 Optimizer 标签调整:

• Compression Level (0-200) — 越高抖动越激进。80 是合理的起点。
• Max Colors (16-256) — 先从 256 降到 128;在 GIF 分辨率下视觉差异通常看不到。
• Remove Frames — 复选框,启用 "keep every Nth frame" 滑块(2-10)。
• Resize GIF — 复选框,启用宽度滑块(100-800 px)。

点 Optimize GIF。结果面板并排显示三个数字:Original size、Optimized size、Savings 百分比。

要做帧提取或 sprite sheet 输出,GIF to Images 标签遵循相同的上传模式,但输出帧缩略图列表(每个可单独下载)、Download All (ZIP) 按钮和列数可调的可选 Generate Sprite Sheet。

实际示例

从电影片段做反应 GIF

一段 90 秒的视频片段中间有 2.5 秒的反应。开 Video to GIF,设 Start Time 42.0 和 End Time 44.5,选 15 FPS、宽 480 px、128 色、抖动开(默认 Bayer 设置)。两遍调色板编码做出大约 1.5 MB 的干净 GIF — 小到能放进 Slack 或 Discord 不出警告。

从设计帧做加载转圈

一位设计师交给你 12 个 200x200 的 PNG 帧的自定义加载动画。开 GIF Maker,上传全部 12 张,在默认延迟字段输 80(给出 12.5 FPS 动画),点 Apply to All,设宽度 200 px,点 Create GIF from Images。结果是帧级完美的加载 GIF,可以直接放进网页或应用内加载器。

给 README 压缩屏幕录制 GIF

GitHub README 里的屏幕录制 GIF 8 MB,你的仓库文档页因此变慢。开 Optimizer,上传 GIF,设 Max Colors 128、Compression Level 80,启用 Resize 宽 640 px。输出通常小 60-80%,在文档大小下仍然可读。如果还需要营销页用的 MP4,把原 GIF 用 Medium 质量过 GIF to Video 做一个单独 1-2 MB 的 MP4。

提示和最佳实践

视频片段保持短。 15 FPS 480 px 宽的 GIF 大约每秒 1-3 MB。5 秒的片段舒服;15 秒很快变得难以管理。需要更长就用 GIF to Video 标签,几乎总是比一个巨大 GIF 更好的答案。

先砍颜色深度,再砍质量。 Optimizer 里把 Max Colors 从 256 降到 128 通常无视觉差地节约 30-40%。颜色减少不再奏效后,才加 Compression Level — 高压缩值会在平面区域引入可见的抖动伪影。

像素艺术关掉抖动。 抖动对照片内容和渐变有帮助,但给清晰的像素艺术和纯色插画加噪点。Video to GIF 标签下,这类输入把 Dither Algorithm 设成 None。

把 Dithering 标签当预览实验室用。 长片段 Video to GIF 完整编码前,把一个代表帧拖到 Dither 标签试算法。Floyd-Steinberg 在照片上看起来最平滑;Bayer 更确定且更快。

两帧是 GIF Maker 的下限。 一张图不是动画。工具会拒绝并给你提示。至少拖入 2 张图。

常见问题与排错

"Add at least 2 images to create a GIF" — GIF Maker 标签需要两帧或以上才能产生动画。多加一张图。

输出 GIF 巨大。 三个旋钮叠加:片段长度、FPS、宽度。一次降一个。30 FPS 到 15 FPS 帧数减半;1280 到 640 px 每帧像素减到四分之一。不要三个一起降,否则会过头。

某些视频上调色板生成失败。 一些颜色空间不寻常或编解码器有怪癖的视频文件让 palettegen 出奇怪结果。先把源用 即将推出: Video Converter 转成 MP4,再把转好的 MP4 拿到 Video to GIF。

GIF 转视频输出看起来像素化。 GIF 上限 256 色,所以从 GIF 做的视频继承这个调色板限制。输出忠实于 GIF,但不会像原生视频。如果有原始视频源,直接用 Video Converter 转换可以得到更干净的结果。

Optimizer 显示 0% 节约。 输入已经被激进优化过,或者你的设置不够激进。试更低的 Max Colors 值或调高 Compression Level。两遍重编码有固定开销,所以微小输入偶尔出来会大几个字节。

切换标签会重置我的工作。 每个标签维护自己的状态,所以切走再回来保留进行中的工作,但硬刷新会清空一切。用工具下面的 Presets 面板保存设置。

隐私与安全

GIF Suite 通过 FFmpeg WASM 在浏览器内本地处理一切。没有视频、图片或 GIF 数据上传到任何地方。第一次用任何标签时,FFmpeg WASM 下载到浏览器缓存(约 31 MB);之后,工具在同一浏览器会话内离线工作。敏感素材 — 内部演示、草稿动画、任何不想分享的东西 — 都留在你的设备上。

常见问题解答

为什么 Video to GIF 要两遍 FFmpeg?

两遍调色板编码做出的 GIF 明显更好。第一遍扫描视频并构建针对你内容调好的最优调色板。第二遍用那个调色板和你选的抖动渲染 GIF,相比对通用调色板的单遍编码,色带显著减少。

我应该用什么帧率?

反应 GIF 和网页动画的标准是 10-15 FPS。24 FPS 接近电影的流畅度,但和 12 FPS 比文件大约翻倍。慢内容如延时摄影 5 FPS 就够。挑你片段下还显得流畅的最低帧率。

GIF Maker 能加载多少张图?

每个会话最多 50 张,PNG、JPG 或 WebP。每张单图最大 50 MB。

Optimizer 的 Compression Level 和 Max Colors 区别?

Max Colors 直接缩小调色板大小,这按比例缩小文件,在大多数内容上 128 色以下视觉上看不出来。Compression Level (0-200) 控制调色板重映射时的抖动激进度 — 高值用可见抖动换更小文件。先用 Max Colors;颜色减少卡住后再用 Compression Level。

转视频时能让 GIF 循环多次吗?

可以。GIF to Video 标签有 Loop Count 字段(1-100)。工具用 FFmpeg 的 -stream_loop 在编码前把输入重复指定次数,所以 2 秒 GIF 循环 5 次出 10 秒视频。

静态 Dithering 标签里有哪些抖动算法?

四个:None(只量化)、Floyd-Steinberg(平滑误差扩散,照片最佳)、Atkinson(较轻误差扩散,经典 Macintosh 普及)、Ordered/Bayer 4x4(快、确定性图案)。输出是 PNG。Dithering 标签处理单张静态图;动画抖动用 Video to GIF 或 GIF Maker。

Optimizer 的最大 GIF 文件大小是多少?

100 MB。非常大的 GIF 可能要一分钟或更久,因为每帧都要解码、重新量化、重新编码。

Sprite sheet 生成器有大小限制吗?

有。如果计算的 sprite sheet 会超过安全的 canvas 尺寸,工具会警告并停止,提示建议减少列数。大 GIF 减少列数,或者先提取帧手动拼装。

相关工具

• 即将推出: 视频转换器 — 通过 Video to GIF 之前把源视频转成干净的 MP4,尤其对不寻常编解码器。
• 即将推出: 视频裁剪 — 把长源视频带进 GIF Suite 之前做更精细的裁剪控制。
• 即将推出: 图片压缩 — 加载到 GIF Maker 之前预压缩 PNG 或 JPG 帧,获得更小输出。
• 即将推出: 视频压缩 — 当 GIF to Video 输出还是太大时,把结果拖到这里做第二遍压缩。

现在试试 GIF Suite:即将推出: GIF Suite