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

背景

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

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

我们还可以发现这张图上的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%左右。

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

3. 抽帧

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

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

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

4. 透明度存储

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

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

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

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

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

压缩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)。羚珑动图会在近期提供GIF文件导出的功能,敬请期待~

欢迎关注「JellyDesign」的小程序

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

参考文章

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

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

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

点赞 23
收藏 154
继续阅读相关文章

发表评论 已发布 5

还可以输入 800 个字
 
 
载入中....
5 收藏