一张动图塞进文章里,画面挺直观,文件却可能比整篇文字都大。
压缩时我更在意两个结果,文件确实变小,动作也还是原来的动作。
打开文件工坊,把 GIF 拖进去,选保留动画,再调整尺寸和输出格式。
处理在浏览器里完成,文件无需上传,也无需登录。
当前每批最多 30 张,单张上限 200 MB,整批合计上限 500 MB。
这些是文件限制,大尺寸和长动画仍会占用浏览器内存,批量时可以先拿一张试参数。
练习时可以先保存这张公开示例 GIF,保留一份原图,再比较不同输出。
先选动图处理
在右侧找到动图处理,选择保留动画。
只取首帧会把动图变成一张静态图片,适合取封面,保留动作时用前一种。
GIF、WebP 和 APNG 都是当前可用的动画输出格式。
选择 JPG 等静态格式又要求保留动画时,工具会提示更换格式。
继续用 GIF,先调颜色和尺寸
目标平台只收 GIF 时,输出格式继续选择 GIF。
GIF 颜色数量可以选择 256 色、128 色、64 色或 32 色。
教程截图、简单图形和少量配色的动画,可以先试 128 色,再和原图比较。
照片、渐变和细碎纹理更容易在减少颜色后出现色带,先看画面,再决定要不要降到 64 色。
GIF 没有可调的质量百分比,主要靠颜色数量和图片尺寸改变结果。
图片尺寸默认保持原始尺寸,也可以选择最长边 1280 px 或 800 px 等选项,按原始比例缩小。
原图已经小于所选最长边时,工具会保持它的尺寸。
我会先保留原始尺寸,只调整颜色,仍然太大再缩尺寸,免得一次改太多,看不出哪一步影响了画质。
点击开始处理,队列里会显示动画的逐帧处理进度。
完成后查看结果尺寸、动画帧数和体积变化,再下载文件。
允许换格式,就试 WebP 动图
WebP 本身支持动画和透明通道,也提供有损与无损编码方式,格式能力可以查Google 的 WebP 文档。
换成 WebP 的前提,是最终发布或展示它的平台能正常接收和播放这种格式。
在文件工坊中选择 WebP,动图处理仍选保留动画,图片质量可以先设为 80%,尺寸先保持原样。
这里的质量数值用于编码取舍,80% 的结果需要和原图比较画质。
如果结果仍然偏大,再降低质量或缩短最长边,每次都把成品下载下来比较。
把 GIF 转成 WebP,也可能得到更大的文件,所以最后看实际体积,不按扩展名判断压缩是否成功。
同一张练习动图的三份文件
这份公开示例是人工合成的高噪声压力素材,画面为测试图案,适合检查动画处理和输出信息。
原图是 960 × 540 px,60 帧,一轮播放 4.8 秒,并带有透明区域。
两份成品使用文件工坊采用的同一处理引擎生成,最长边都缩到 800 px,GIF 颜色数量设为 64 色,WebP 质量设为 80%。
| 文件 | 尺寸 | 体积 | 动画帧数 | 单轮时长 |
|---|---|---|---|---|
| 原始 GIF | 960 × 540 px | 16,224,378 字节 | 60 | 4.8 秒 |
| 800 px、64 色 GIF | 800 × 450 px | 7,935,363 字节 | 60 | 4.8 秒 |
| 800 px WebP | 800 × 450 px | 3,917,302 字节 | 60 | 4.8 秒 |
逐帧读取这三份文件,帧时长均为 80 毫秒,循环信息均为无限循环,三份文件都能读取到透明像素。
这组结果同时改变了尺寸和编码参数,体积差异只对应这份合成素材,画质还要打开文件比较。
成品要看完一个完整循环
结果里的帧数能帮助发现意外静态化,真正的播放效果还要打开文件查看。
从头播放到结尾,确认动作顺序、速度和循环方式,再关注文字、渐变和物体边缘。
带透明背景的素材,放在深色和浅色背景上各看一次,检查边缘和透明区域。
减少颜色、缩小尺寸或有损编码都会改变画面,动画完整和画质完全不变是两件事。
当前 GIF 处理会按原始帧序重新编码,并保留播放时长和循环信息,成品仍需在目标平台试放。
文件工坊会提示体积未减小的结果,这时可以重新调整参数,或者保留更合适的原文件。
改参数会清掉当前处理结果,已经满意的那一版先下载保存。
参数确认后,再处理整批
把其余动图加入队列,同一批使用统一的输出参数。
点击开始处理,完成后用每张文件右侧的下载按钮分别保存,也可以点击打包下载获取 ZIP。
某张失败时,查看它自己的提示,先分离出问题文件,避免为了重做一张而重复处理整组。
首次处理需要加载图像引擎,处理过程中让当前页面保持打开。
如果压缩是为了给文章插图,可以继续按Markdown 转公众号教程导入原稿并排版。
静态截图需要统一圆角和留白时,用截图美化工具处理,动画压缩和截图装饰分开完成。