本文针对大尺寸GIF图压缩问题，介绍了使用AE插件GIFGUN和工具Gifski两种方案。先阐述了GIF图压缩的场景、要求及影响大小的核心要素，接着按流程介绍从静态图制作、录屏、合成到压缩的步骤，最后总结方案并解释相关细节，为解决GIF图压缩难题提供了有效方法。
新更：
我文章里上传的 GIF 图有的太大知乎居然无法正常显示，可我的图片都是 <10M 的，如果你也点不开某些 GIF 图，可以去站酷看这篇文章或者直接看视频教程：
站酷 - GIF 终极压缩指南www.zcool.com.cn视频教程（简洁版）
视频教程（絮叨版）
https://www.bilibili.com/video/av70758707/?p=2www.bilibili.com正片
UI 设计师在作品包装的时候，对于想展示动效交互的图一般都非常大，因为大多数都需要对这张 GIF 进行排版设计，这所谓的排版设计 GIF 图就是下面这种：
这是孔晨的站酷作品（https://www.zcool.com.cn/work/ZMzgxNDc4MDQ=.html）作品展示有很多的 GIF 包装图，逼格满满。
这种 GIF 图对作品包装的加持非常大，唬人杠杠的。不过这类图都有一个特点，就是图片分辨率大，通常又不能改，而文件大小又必须在 10M 以内（否则传不到网站里），实际上想做到这样的 GIF 并没有那么简单，其中的坑非常多，我就在网上寻找 GIF 压缩的解决方案却找不到靠谱的答案，所以我用了 2 天时间探索测试，总结出一套算是靠谱的方案分享出来（当然不是 PS 那种 low 爆的方案啦）。
前菜知识
1、对应场景
本文的教程只针对大 GIF 输出的压缩，也就是说不改变 GIF 的尺寸是前提，所以涉及表情包压缩那些不在本文考虑范围内，不过因为表情包 GIF 图不限制尺寸，要求更低，用本文的方法去压缩表情包简直轻松加愉快，其他各类不限制尺寸的 GIF 通通适用。
2、GIF 图的要求
- GIF图尺寸不能改，因为要和作品输出尺寸统一
- GIF 大小必须 10M 以内，关于这一点国内外平台都比较统一（知乎、站酷、Dribbble 都是 <10M 的要求）
- 流畅度第一，颜色轻度失真可以接受
3、☆☆影响 GIF 大小的 4 个核心要素☆☆
影响 GIF 大小的因素有不少，包括 PS 里面那些可感知、图案、颜色数量、WEB 色等等，或多或少都会影响 GIF 大小，但是，我这里说的 3 个核心要素是影响比例最大的要素，比如 GIF 的颜色数量，其实颜色数量对 GIF 大小影响幅度不算很大，所以不在 3 要素之内。
- GIF 的分辨率尺寸（但本文由于用途不同所以不改尺寸是前提）
- GIF 时间 （一个 GIF 有多少秒，是最影响大小的要素了，所以当 GIF 大的时候砍时间比什么来的都实惠）
- GIF 帧数（也叫 FPS，每秒多少帧，即每秒闪过多少张图片，值越高 GIF 越丝滑流畅，视频同理）
- GIF 像素颜色数量，这里说的颜色数量不是 GIF 导出是选的 256，而是 GIF 图片本身包含的颜色数量，或者说颜色复杂程度。
针对上面最后一条，像素颜色数量举个例子：
4、GIF 的历史和新动态图技术（aPNG、WebP）简介
严禁的技术资料我就不说了，这里用大白话简单介绍。GIF 是个很古老的技术，所以今天 9012 年了依然没什么改变，那么老技术的限制就是图片有毛边、颜色又少、大小优化又很烂。而新的动态图如：aPNG、webP，这 2 种都是可以动态显示图片，可惜的是新技术，各设备和浏览器支持程度不一样，说人话就是技术不稳定不是个保守方案。而这 2 个格式在移动端却又是二分天下，aPNG 是苹果专用的，webP 是安卓专用的，也就是说移动端可以大胆的用这 2 种格式去实现动态图，开发都知道这个；额外提的是这 2 种图制作过程都是先生成 PNG 序列帧，然后通过工具（ Isparta ）去合成这 2 种格式。
5、为什么不用 PS？
PS 有几个坑点：
- PS 巨卡，这个点操作过 GIF 的人都知道
- PS 对视频的编辑功能偏弱，且帧数最大限制 500 帧，想先导入再删帧都没机会
- GIF 导出调整参数容易缓存错误，关键错误弹窗之后无法导出，一切前功尽弃
- 没有相对直接的调整质量的选项，每调一次都要重新渲染 GIF，有时候渲染结果都是相同的（实际出错了）
开盘
这里就按照作品包装的流程来说，从零到 GIF 压缩完整说一遍。
步骤一：静态图制作
就像文章开头的示范图片，你需要先把静态不动的元素排好版，给会动的动效界面留个地方；大家都是设计师我就跳过。
步骤二：录屏
这一步就是要把你想展示的动效交互录成视频，大家八仙过海各显神通吧，但我这里简单说几个方案：
- 大佬：动效交互直接在 AE 里做，一顿操作行云流水，导出视频
- 普通人，在 Principle 等同类动效交互软件里做，然后用电脑录屏或者投到手机里录屏，这种是大多数的方案
- Figma，最近 Figma 出了 Smart Animate 功能，在原来的原型交互基础上又可以做一些过渡的微动效，香美至极
电脑端录屏工具：
- MAC 用自带的录屏工具，Shift+CMD+5
- Win 其实没什么出名好用的录屏，这里推荐 OBS。注意：因为 WIN 大多数没有人用 DPI 缩放功能，也就是说录屏的 GIF 实际上像素很烂，所以大家尽量在手机去录屏。
步骤三：合成
这一步就是要把静态图和视频融合到一起，下一步就做成视频了，所以说这一步该剪辑的剪辑，该调色的调色。那么现在就有 2 个选择：
1、用 PS 去简单剪辑和直接导出 GIF 2、用 AE、Final Cut Pro 等视频剪辑软件搞定
前面简单总结过为什么不用 PS，我这 2 天一直在研究 GIF 压缩，花 PS 上的时间可不少，这里就放弃 PS 了。而视频剪辑软件这里优先推荐 AE，其实这一步的目的大家要搞清楚，就是需要调颜色的调颜色，需要裁剪、加速、加东西的，总之就是要把所有编辑、调整的活儿在里搞定，最后导出视频再纯粹的压缩 GIF；所以视频编辑软件大家用自己顺手的即可，PRE 和 FCP 都可以。而我推荐用 AE 是因为能搞的效果很多，顺便可以学学 AE 没啥坏处，孔晨作品里的动效多数都是 AE 做的（少部分是 Principle）。
☆☆划重点☆☆
这一步其实很重要，因为录的视频可能很大，时间很长，都需要在这一步做裁剪，下面【AE 操作示例】会有示例介绍，这里总结一下：
- GIF 时间尽量控制在 15 秒以内，超过也没关系，最终看 GIF 导出大小能不能优化到 10M 以内
- 如果视频太长有 2 个选择：1）裁剪，删除没用的边角料视频，如操作间隙、掐头去尾等等。2）加速，裁剪完以后，可以通过给视频加速来达到缩短时间的目的（在我这篇教程里可以看到大量被我加速的 GIF 图）
- 帧率，有人会担心视频帧率影响 GIF 大小，实际上不会影响，一码是一码，GIF 的帧率是压缩那一步设置的，所以我的视频都是 60FPS
步骤四：AE 操作
1、导入素材，这里只是把素材放到 AE 里，还没有新建画布
提示：如果苹果导入AE 视频出现错误 81::1 如图，则通过 QuickTime - 导出 1080p 转换一下就好（见 GIF 操作）。
2、静态图托到右侧（见 GIF 图示），这里静态图就是我们 GIF 的真实尺寸，所以直接拖进去，视频自动也是这个尺寸
3、视频同上操作，也托进去，这时候把视频按我们静态图设计的位置摆好即可，中间涉及到调整大小，先单击视频，然后拖拽边角锚点即可，记得按着 shift 保持比例不变。
4、这时我觉得视频太长，而且有很多边角料没用的视频间隙可以删掉，所以要做剪辑。AE 按快捷键 CMD+Shift+D，咔嚓一下，把视频一分为二，这样我们可以一级一级去裁剪，大家自由发挥
5、裁剪完成后适当加速，开头说过影响 GIF 大小的要素有时间，所以缩短时长是最实惠的压缩方案，上面已经剪辑过一部分视频，这里再酌情来点加速；然后调整时间轴，这里其实不用管素材多余的长度，直接限定 AE 视频长度即可，见图理解一哈
6、合成步骤到此结束
步骤五：GIF 压缩（2 套方案）
细心的人会注意到上面合成的步骤没有导出视频就结束了，这时候有 2 套压缩方案选择：
- Gifski（软件）
- GIFGUN（AE 插件）
一定有人问哪个好，没跑了。那我分开说一下：
Gifski
纯粹的把视频压缩成 GIF 的工具，非常方便好用，苹果国内商店能直接搜到，而且免费，PC 机也有。最大的好处是设置简单，任何视频都能托进去无脑导出，便捷至极。
GIFGUN
首先它是 AE 里的插件，想用它得有 AE，MAC 和 PC 都有版本，就我个人体验来说 GIFGUN 的压缩效果很棒，因为参数设置比 Gifski 多一些，压缩更灵活。
这 2 个软件我会交替使用，最便捷的当然是 Gifski，但单纯从压缩质量和效果来说，GIFGUN 比 Gifski 好一些，我测试过不少图，GIFGUN 能压缩的很小，当然也是因为 GIFGUN 的压缩参数更多一些。
选择方案 1：使用 AE 插件 GIFGUN 压缩
1、安装插件安装方面我这里不细说了，百度有很多，这里贴一个 B 站 UP 主的视频：https://www.bilibili.com/video/av51905975?from=search&seid=13263881613802650582
2、我们上一步做到合成了，这时候安装完插件去窗口里选择即可
3、打开后界面非常简单，我们选择小齿轮进入设置界面，这里常用的功能只有【帧率】、【最大颜色】、【压缩】，其他选项可以参考我的设置：
保存位置自己设一下帧率：帧率一般来说 20 左右，如图图片实在太大也可以设置 12，总之越小图片就越小最大颜色：因为是 UI 作品的导出，所以颜色上最大 256，最小 128 是我能接受的范围，颜色再少就没意义了压缩：这个功能非常给力，他比 PS 那些有的没的来的更直接，图片太大直接在里有选档位压缩就行了，效果很明显
这里我要额外说的建议就是，如果 GIF 压出来非常小，我们就可以反手把参数调满，让 GIF以最高质量展示，反正余量还有很多；比如想我截图里的就是最高显示质量，反正 10M 以内尽量的大就行了。
4、设置完后点保存，生成即可。生成 GIF 后我们检查压缩效果和大小，如果大小超过了就去上面参数里慢慢往下调参数压缩，自己捣鼓吧，这套方案到此结束。
选择方案 2：使用 Gifski 压缩
1、Gifski 就是把一个视频导出成 GIF，安装方法直接去苹果商店搜索，或者官网（Mac 和 Win 都有）下载（https://gif.ski/）
2、这时我们回到合成那一步把 AE 里编辑好的视频导出
3、在苹果系统中，AE 导出的视频需要转码一下，否则其他软件识别不了，操作如下：
4、把转码的视频拖入到 Gifski 中，我们能看到简单的参数
尺寸：尺寸一般不动，因为我们把一切都在 AE 里做好了；但如果你只是弄点表情包其他无所谓的 gif 图，就可以把尺寸缩小来压缩，这样压缩效果最好。
FPS:我一般保持 20 以上，也能影响 gif 大小，大家多尝试即可。
Quality：就是压缩质量的意思，拉到最右边就是不压缩，反之就是压缩；这其实是我要夸 Gifski 的地方，这里就是简单粗暴的让你控制想压缩多少比例，而 PS 里那些参数让人一看就懵还各种卡真是神经病。
PS：右下角那个大小是 GIF 压缩的预估大小，是不准的，大家无视就好。
5、点击【Convert】压缩，压缩完就会有提示啦，我们先看大小是否符合 10M 以内，不符合就重新把视频拖进去重新调参数压缩；如果符合 10M 以内就点击【save】保存，OK，齐活儿！
上面演示中，我压缩后大于 10M，所以我不用保存，再次拖入视频重新调参数并压缩，剩下的就不演示了。
6、完事儿
补充
有个细节可能有人会问：文章开头提到孔晨的 GIF 图，Dribbble 和站酷都是限制 GIF <10m 的，为什么他们的 Gif 看起来很丝滑顺畅？
这里解释下，因为我直接用的 Figma 做的交互动效，也是直接录的 Figma 演示稿，自己操作都有点卡卡的，更别说录成视频了，这个锅应该 Figma 来背。所以如果追求丝滑交互动效的同学，要用 AE 或者 Principle 这种纯动效软件来做，这样出来都是丝滑流畅的；关于这一点大家可以直接去 Dribbble 找一些动效视频用我的方法转成 Gif 来对比流畅度，总之这套方案还是非常靠谱好用的。下面是我找到一段 Dribbble 视频和我压缩的 Gif 图，大家对比一下：
原视频：时长 23 秒，分辨率 3200×2400，文件大小 4.6 兆； GIF_1：时长加速到 15 秒，分辨率 1200×*，GIFGUN 压缩等级高，帧率 15，颜色 128 GIF_2：时长加速到 15 秒，分辨率 800×*，GIFGUN 压缩等级低，帧率 30，颜色 128
技术总结
篇幅看似较长，其实都是图片撑起来的，为了让更多的人能看完并成功落地，难免会有啰嗦的地方，如果还不太明白的可以看本文的视频版教程（https://www.bilibili.com/video/av70758707/?p=2）；其实真正的内容就是使用了 AE 插件 GIFGUN 和工具 Gifski 2 种方案。不同的是我探索这 2 个方案之前看了很多国内外 Gif 压缩资料，也踩了很多坑，做了各种 GIF 压缩测试，才筛选出来这 2 种比较靠谱的方案；最后，希望能帮到需要的人。
扫一扫
2039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
