我很少写工具教程，这次是因为被GIF压缩（准确的说的微信公众号平台的GIF尺寸要求）折磨惨了，所以特别想要分享一下自己是如何将《手机端表格设计》里的第二张动效图从原本的7.5M，在尺寸不变、保证画质的情况下压缩至0.76M的。

我尝试了很多一键压缩工具后，发现要么尺寸达不到，要么画质下降太多，最后发现压缩这种动效图还是PhotoShop最靠谱。压缩GIF不外乎从四个方面着手：损耗、尺寸、帧数和颜色。前两个大家使用一键压缩工具时都有接触，这里主要从帧数和颜色着手进行高度无损压缩。

压缩前，宽度720像素、占用空间7.5MB：

压缩后，图片尺寸不变，占用空间0.76M（774KB）：

拿到原始的GIF，用PS打开后，我建议第一件事情是打开“窗口>时间轴”查看它的帧数。

GIF动画是由一张一张的图片切换构成的，对直接录制的GIF而言，有多长的动画就有多少帧。

通常的一键压缩方式会将GIF里所有帧等同的无差别压缩，这要很容易丢失关键信息。而用PS进行手动压缩时，我们就可以利用自己对动画的了解，进行有差别的压缩，去掉无用信息，保留有用信息。

删除相同帧

你会发现大部分动效图前后都会有一段时间的静止画面，这些静止画面当然是有用的，但是我们不需要那么多一模一样的帧画面重复几十个来达到。

例如范例图片的开头静止画面有85帧。他们既然没有差别，那么保留一帧就好。删去前面多余的84帧。这对于原本四百多帧的动画而言，这个分量还是有感的。

但是开头的静止还是有用的啊，如何让第一帧停留更长的时间呢？非常简单，点击帧方块右下角的箭头，从下拉框中选择延迟时间。结尾相同帧也可以用这种方法去掉。

通常来说，前后各延迟0.5秒是差不多的。但是因为我这个GIF先后是连贯的（第一帧和最后一帧的画面是相同的，循环时没有画面突变），所以我去掉了结尾帧，把开头帧延迟了1秒。

如果你愿意花时间的话，动画中间也有一些大量重复帧是可以用类似的方法去掉的。例如鼠标指针移动到按钮上，然后点击，这过程中指针肯定会有一定停顿，也能造成十几二十个相同帧。

去除相同帧之后，原来四百多帧的动画轻轻松松被拦腰截到两百多帧，而且看起来与原来的GIF没有任何区别。你甚至还能够通过修改帧延迟时间来调整动画节奏。

动画加速

前面提到过，一般一个动画的长度和帧数是相对应的，所以加快动画速度、减少动画时长，对压缩GIF的效果也是很不错的。

尤其如果是录制的动效图，整体的速度是很有可能需要提高的。例如录制过程中，鼠标指针从一个按钮移动到另一个按钮的过程中，可能因为思考、找地方甚至卡鼠标的原因导致速度过慢。

Ezgif提供了Speed功能可以通过设定百分比来一键加速。使用PS的话，要做到这一点会稍微麻烦一点。例如你可以选择所有编号为“X0”和“XX0”的帧进行批量删除。这样一次就能删除10%的帧数。虽然效率不是特别高，但是可能够顺便调整一下对整个动画的节奏（可以着重删减想要提速的一小段），也是不错的。

处理完帧数后，原本的453帧减少到195帧，占用空间从7.5M缩小到2.2M。下图就是这一步达到的效果，画质和尺寸并未收到丝毫影响：

我不建议过早对GIF对尺寸进行处理，所以我们先来看看如何压缩颜色。

在PS里选择“储存为 Web 所用格式”，你就会看到一个这样对窗口：

不同于JPG格式，GIF动画有一张固定的颜色表，图片中对所有颜色都会限制在这张表里。那如果需要表上没有相近都颜色会怎样呢？例如下面这张小图看起来还好，但是放大后会发现明显的仿色效果：

动效GIF的一点特殊之处是它需要的颜色很少，例如本文范例中的关键颜色只不过黑、白、紫罢了，头像里虽然有很丰富的颜色，但是那么小的区域就算有一定失真也不会影响整体效果。

自动删减颜色

首先，你可以先大胆地把256个颜色减少到16个（需要注意的是，最好选择“扩散透明度仿色”，这样能够在色彩很少的情况下画面质量好一点）：

你会发现图片看起来并没有太糟糕，头像的失真在动画中很容易被忽略。相比之下，占用空间却从2.066M减小到了935.7K（约等于0.91M，窗口左下角可以看到预估大小）。

手动删减颜色

即便只剩下16个颜色了，其实还有压缩空间。仔细看一下颜色表，你会发现有那么几个颜色看起来非常相似，对普通人来说其实很难分辨。

尝试着删除看上去相似的颜色，但是注意一定要保留关键色，例如黑色、白色、紫色、头像里人脸的棕色。

再看看窗口左下角的占空空间，又减小了一两百K！如果你觉得颜色还原度不高，可以调高仿色的百分比（我选的是0%），但是这样可能会增加一百来K。

压缩完颜色之后，图片尺寸没有变化，画质没有损耗，只是局部颜色产生偏差。占用空间从2.2M缩小到了774K（即0.75M）。

现在GIF已经压到了原来的10%，你再获取想要的尺寸就容易多了。例如你把宽度改成480像素后，占用空间就减小到四百多K了，相对之前的7.5M，这几乎只剩5%了。压到这种程度，已经远小于普通的静态图了。

最后送给设计师们一个趣味测试：