如何正确压缩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」的小程序：