如何正确压缩GIF格式文件？来看京东设计师的总结！

本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索，其中归纳了压缩GIF的各种方法以及相关开源工具，可以为需要压缩GIF文件的设计师提供帮助。

背景

说到动态图片，大多数人的第一反应就是GIF格式。虽然支持动效的格式不止GIF，但GIF确实是目前编码及解码最简单、支持工具最多、兼容性最强的动图格式。

近年来，动态图片也开始逐渐应用在电商广告图领域。羚珑智能设计早在2018年底就上线了「动态Banner」功能，用户可以在线制作并导出动图。由于当时使用的开源包是FFmpeg，导出的GIF文件实在过大（基本>5M），因此只支持了导出MP4格式（基本<500K）。但MP4格式在动图应用场景受到了最基础的准入门槛限制：它们大多数都只能上传GIF。比如今年京东app首焦广告图已经开始支持动图——仅限GIF格式。因此为了拓展羚珑动图的场景应用，支持GIF的导出是必须的，关键点就在于如何压缩GIF格式文件。

关于GIF格式

要压缩GIF，那么首先我们要先了解GIF是怎么存储的。GIF的全称是Graphics Interchange Format，是在1987年由Compu Serve公司开发的一种位图图像格式。可能因为开发年代比较早，GIF的位深只有8位，最多只能支持256色。PC显示器通常支持的真彩色指24位，数量高达1677万多色。设计师在导出GIF的时候，经常会碰到颜色失真的情况，比如下面这两张图是同一个设计文件导出的MP4格式和GIF格式的画面质量对比，可以看到GIF截图噪点比较明显，尤其是手机壁纸渐变那部分，这样的失真实际就是GIF格式本身支持颜色丰富度不够导致的。

我们还可以发现这张图上的GIF画面质量已经是比MP4低了，但文件大小却是MP4的4倍多，这还是在我已经对这个GIF做了压缩处理的情况下。因为GIF存储采用的压缩算法是Lempel-Zev-Welch（LZW），一种无损压缩方式，压缩时图像数据不会减少。因为要一帧一帧存储所以图片，一个高清效果的10秒GIF大约需要60MB存储空间，而同样质量的MP4格式仅仅只需3MB（这也是羚珑动图在初期只支持导出MP4格式的原因）。但GIF使用量大的主要原因就是易用性很高，在许多浏览器和软件中可以无需解码直接播放。因此即使后来出现了APNG和WebP等动态图片格式，GIF仍然占据主流未被取代。

压缩GIF的各种方法

1. 压缩尺寸

GIF跟一般的静态图片一样，文件大小受尺寸大小影响，尺寸越大的GIF文件越大。压缩尺寸可以有效降低GIF的文件大小。但是电商中的广告图坑位一般对尺寸的要求都比较严格，比如通天塔中的移动端图片热区组件就要求只能上传宽度=1125px且高度>60px的图片。在一些尺寸要求不那么严格的应用场景，我们可以考虑为用户提供不同尺寸规格的GIF下载来满足不同文件大小的需求。

2. 减色

GIF是连续动态图片，每一帧之间的信息差异小，因此颜色是可以复用的。通常GIF会在文件头储存全局调色盘，包含全部帧会使用到的所有颜色，在播放时通过调用调色盘颜色进行渲染。GIF的颜色越丰富，需要储存的颜色信息就越多，文件也会越大。设计师们使用PS导出GIF时看到的颜色表就是GIF文件头存储的全局调色盘。减少调色盘的颜色可以增大GIF的文件压缩率。但GIF本身就只能存256色已经很少了，减色对GIF图像效果影响比较大，有可能会造成GIF噪点更加明显。因此使用减色对GIF进行压缩有较高风险。而且减色压缩的效率也比较低，减去一半颜色可能只能压缩10%左右。

3. 抽帧

帧率指GIF每秒钟依次播放的图片数量，比如：24帧/秒指这张GIF在1秒钟内播放了24张图片，帧率越高GIF的动效会越流畅，但需要储存的图片也会更多，文件会直线增大。一个3秒GIF，帧率为24帧/秒，那么就要储存72张图片；但如果通过抽帧，将帧率降到12帧/秒，那只要储存36张图片就可以了。不过抽帧就像翻页动画书被抽掉间隔页一样，会直接影响动效流畅度，所以如果通过抽帧来压缩的话要让用户保存前先预览，自行把控具体的效果。同时，由于减少帧数，每张图片延迟的时间参数不变的话会导致图片播放过快的情况，需要开发侧进行延时减缓处理。下面两张动图，上面是原图，下面是抽帧处理后没有做延时处理的图，对比来看，下图明显丢失了一些动效细节，比如商品的缓动效果。

4. 透明度存储

这种压缩方式是只完整保留GIF的第一帧，排除后续帧没有变化的部分，只存储有变化的像素，避免存储重复的信息。如果图片本身具有较大的静态区域，这种储存方式也许可以有效减小文件大小。比如这个猪猪吃糖.gif：

使用imagemagick逐帧拆开来看，就会发现只有第一帧是完整的，后续的帧只储存变化的像素部分：

透明度存储方式是一种非常适合背景不是异形（即：没有透明区域）的动图存储的方式，因为它几乎不会影响到动图本身的视觉效果和动效表现。

压缩GIF的开源工具们

经过一番研究之后，我发现其实目前对于压缩GIF的技术已经相对成熟，并不需要从零去造轮子，利用以下这些开源工具可以实现对GIF压缩处理。

1. ImageMagick

ImageMagick是一个能够读取和写入各种格式图像并对其进行编辑和处理的软件。

可以将图片合成为GIF，以及通过命令行对GIF进行优化及压缩（可能需进行参数修正）。例如-使用convert方法Optimize：
convert XXX.gif -fuzz 5% -layers Optimize YYY.gif

相关链接：ImageMagick中文站：http://www.imagemagick.com.cn/index.html

2. Gifsicle

Gifsicle是一个能够实现透明度存储的命令行工具。

可以通过减少帧数、减少颜色、减小尺寸、默认算法（透明度存储）等方式压缩GIF。

相关链接：Gifsicle GitHub：https://github.com/kohler/gifsicle
Gifsicle网站：http://www.lcdf.org/gifsicle/

基于Gifsicle有损压缩Gif：https://kornel.ski/lossygif

3. FFmepg

FFmpeg本身是一个可以记录数字音频和视频的开源软件。

但FFmpeg也可以导出GIF，或者将Video转换为GIF。FFmpeg导出的GIF可以通过以下方法来提高质量： 重新定义一个更好的调色板；使用paletteuse滤波器解决颜色映射与抖动。

相关链接：使用FFmpeg处理高质量GIF图片：https://www.oschina.net/translate/high-quality-gif-with-ffmpeg

4.  ezgif

前三种开源工具都需要代码环境，对设计师们可能不太友好，推荐一个封装了以上各种工具、能够在线使用的网站：https://ezgif.com/

ezgif是一个在线GIF制作编辑网站，可以实现制作GIF、将视频转GIF、或者使用各种方法对GIF进行优化和压缩等功能。

结语

以上是作为产品侧进行的GIF压缩原理及方法的归纳探索。大部分羚珑动图背景和蒙版部分是静态的，动态区域相对固定，因此我们重点尝试了透明度存储的方式，通过这个压缩方法我们已经在测试中成功导出了较小的GIF文件（此处插入：给凹凸开发聚聚端茶.gif）。羚珑动图会在近期提供GIF文件导出的功能，敬请期待~

欢迎关注「JellyDesign」的小程序：

参考文章

存在了30年的GIF会爆发还是消失？ https://36kr.com/coop/toutiao/5056552.html

这样压缩GIF，体积小还效果好 https://sspai.com/post/42916

浓缩才是精华：浅析GIF格式图片的存储和压缩 https://cloud.tencent.com/developer/article/1004763