计育韬：新媒体（公众号）端GIF动态图压缩对抗与优化的核心方法

纵观腾讯系的顶级、二级、三级域名，http://mp.weixin.qq.com（也就是公众号生态域名）是一个业务端典型吃力不讨好的存在——

——但大多数运营人和品牌方，除了每年 300 块的认证费实际上没有向腾讯上缴过一毛的流量过路费。而流量主生态和朋友圈广告生态作为少数能为腾讯带来盈利的能力，基本只是在补腾讯云自身的窟窿而已。

这时候，拿流量本体开刀已经是相对温和但有效的方法，由此动辄若干 M 的 GIF 首当其冲，每年都会被时不时地提升平台端压缩强度。由于腾讯图床对 GIF 的压缩算法一直是黑箱的状态，所以运营人在 GIF 图设计工作中往往苦不堪言，仅有的纸面限制在于：

经过 2023 年 5 月的公众号平台更新后，GIF 的最终呈现效果更「差」了，终端展示的 GIF 非常容易出现摩尔纹（也就是肉眼所见 GIF 中出现颜色层层堆叠的效果）。经验比较匮乏的运营人只能通过与设计师协同，反复穷举尝试来解决画质问题。所以，本期计老师将基于

几个方面来谈。

站在专业角度，设计师采用 Adobe Photoshop 作为最终导出 GIF 格式无可厚非。但 PS 的 Web 输出本身侧重的并不是「压缩」，因此我们往往会获得一个体积过于庞大，无法上传到公众号或者上传后被严重压缩的结果。

那怎么办呢？从流程上讲，大多数基于视频动画制作生成的 GIF 应当先遵循如下生产方式：

看似简单的两个步骤中，有几个要点往往是新手设计师和运营人容易出错的：

其他参数在 PS 内没有特定要求，仅是一般来说，

，再者毕竟我们之后会进行第二轮压缩工作，所以 PS 出图在确保上述注意事项都准确的前提下，实际画质愈佳愈好。这里另外强调一个 GIF 自身属性和静态图衔接的问题：

GIF 至多有 256 种色彩，而一张 JPEG 广域可以有 16777216 种色彩，所以视频到 GIF 的过程中，色彩的损失是必然的，而非公众号层面的问题。在 PS 中，我们可以先选择以最大色彩数 256 色进行导出，以备后续压缩使用。而对于和其他静态切片的衔接，一般建议使用局部定位方法（如 e2.cool 黑科技 SVG 编辑器中 GIF 定位器）或者半透明静态蒙版策略进行无缝对接，对于前者设计师要以动态局部为范围导出 GIF，对于后者设计师要制作 GIF 上与静态图衔接处的静态图层蒙版，通过排版进行叠加。

以 MacOS 系统为例，计老师一直主推的是 GIF Brewery 软件，它的可控参数多样且输出能力稳定，并且支持多种 GIF 生成方式，其详细的操作教学可以点击阅读《

》了解。

无论是科技品牌还是奢侈品，我在参与定制相关高级 SVG 图文时都主要采用它进行 GIF 的压缩优化。在该软件中，首先建议将尺寸最终锁定到 640 宽，如果体积仍然超过 10M 的话我们甚至可以选择更激进一些的 500 宽等。加之对帧数的控制（默认 20 帧），这两个参数已经在很大程度上决定了 GIF 的输出体积。

该软件和 PS 一样也可以设置 GIF 是循环还是一次/多次播放，这里也提醒部分新手运营人

而关于该软件的局部色彩算法，我们这里参考简书作者刘板栗同学的实验结果：

就我个人而言，最偏好于 Ordered 选项。软件的「画质增强」功能可选可不选，实际体验差异不大。

关于 Windows，则同样可以阅读《

》查看对应软件的教学。 

下面我来谈谈几个关键的 GIF 图压缩的意识问题。

有些运营人存在比较病态的 GIF 制作策略，顶着公众号 10M 的上限认为约接近 10M 体积的 GIF 就越好。但仔细想一下，如果每张 GIF 动辄 10M，那么一篇图文整体可能就消耗掉近百 M 的流量——大多数情况下你在其他 APP 中观看一个短视频都不需要加载如此多的信息。

所以过大的 GIF 会直接导致图文访问速度极慢，打开图文时刻可能会有长久的白屏。正确的策略在于，确保画质相同或接近的前提下，GIF 越小越好。我们观察以 GIF 设计著称的如喜茶等公众号的图片素材，其动态图一般只有几百 KB 而已却能表现出极佳的视觉张力，这在本质上还是运营团队的综合水平问题。

尤其对于科技类品牌，黑底+产品图动画是非常好的 GIF 设计方向，它们的输出体积往往更小，而且你可以设置更少的色彩数但依然确保画质体验。这里参考计老师和华为合作的 SVG 图文案例《

》，该文中的 GIF 数量爆表，但表现都非常优异。

有时候（尤其透明 GIF 导出）你可能会遇到一类比较特殊的问题——已经导出完毕的 GIF 再上传到公众号素材库中，色彩发生比较严重的失真——这时候，可以利用 PS 再次回滚 GIF 文件，使用 Web 格式三次导出。

很多图像中的动画实际上只牵涉小局部，这个时候设计师不要偷懒整体输出，这既不利于无缝图的衔接又影响了动态部分的实际画质。在前面我们已经提到过，可以通过 GIF 定位器这类 SVG 模版通过排版进行组合。

前面已经提到，10M 的上限是直接在素材库上传的上限，直接 Ctrl CV 复制无法超过 3M。所以压缩后如果的 GIF 超过了 3M，那么建议使用替换法在图文内改动图片地址，具体可以阅读《

》。

不是任何动画都非要基于 GIF 展示，公众号生态内丰富的 SVG 动画能力可以实现很多对动态呈现的极大优化。

结合前面「减小渲染的非必要面积」，我们可以通过定位，或零高（height: 0;）叠加思路进行设计上的动静分离和排版时的动静组合。

以 Apple 公众号的《

》为例，光线与游戏画面时则为两个部分：

业态中目前主流的各大 SVG 编辑器（如 E2.COOL、135、秀米）等都有数量庞大的 SVG 自动/被动动画预置模板，思路的小小变化和简单的创意叠加，原先需要 GIF 完成的效果大多可以通过代码转化实现，这里可以阅读如 E2.COOL 黑科技 SVG 编辑器的介绍《

》。