查看原文
其他

“不小心录了个100M的GIF,咋办?”

砺心 阿虚同学 2022-06-07

阿虚同学

读完需要

7分钟

速读仅需 5 分钟

哈哈哈哈,封面图那个100MB的GIF大家看看就好,实际上一般不会录制出这么大的GIF

真的需要展示这么长的步骤的话,一般建议还是录个视频吧

不过GIF压缩也是很多时候需要面对的问题:比如在微信上,GIF的大小只能是2MB左右,大了则会显示文件过大无法发送预览等。(多数平台限制GIF的大小在5M以下)

想要制作出一张精细的GIF动态图片并不是简单靠一个傻瓜软件就能解决的。

想要充分的解决一个问题,最好能明白其背后的原理是什么。

1


   

决定GIF质量的因素是什么?

GIF是Graphics Interchange Format的缩写,意为「图形交换格式」是CompuServe公司在1987年开发的图像文件格式,已有30多年历史。

GIF的原理很简单,其实就是将多幅图像保存为一个图像文件,连续播放,从而形成动画的形式。视频其实也是这个原理,只不过视频多了音轨,而GIF是没有的。

还不清楚?翻页动画玩过吧?你可以把GIF理解为「电子版的翻页动画」

▲翻页动画

在30多年前GIF格式诞生时,原本只是想用作网站上会动的小图标,也没预料到去承载视频。

所以到了如今,它的短板就暴露了——只支持8位调色板(即2的8次方),也就是一张GIF图最多只能有256种不同颜色。所以GIF格式,其实从根本上就已经和质量无缘了。

如果你以为256颜色很多,那就大错特错了!平常你拍的照片都是JPG或者PNG格式,支持24位调色板,即1600万颜色(PNG还另有8位透明通道),也就是说需要这么多的颜色才能呈现高质量的画面细节。

GIF比较适合显示色彩对比强烈、基本都是大色块的图像:

▲比如这种

但对于渐变、阴影柔和过渡的影视图像则很难处理。

如何将1600万色的图像用256色尽可能地还原出来——又要控制质量又要控制文件大小,就是在GIF压缩时要面临的问题了。

如果我们简单粗暴的直接把PNG格式转换为GIF格式,就容易出现右图这种情况,即丢失了渐变效果,出现了色块:

解决这种问题的技术叫做「仿色」(或者叫图像抖动)

1.1


  

仿色(抖动)是什么?

仿色就是用少量颜色通过像素点的离散分布来模拟中间色。换句话说,就是通过相邻的像素显示不同的颜色(或灰度)来模拟出一个原本不存在的颜色(或灰度)。

Emmmm,好像还是很难懂?那举个例子:

比如8位色下只能显示128或者127的色阶(整数),我要显示127.5咋办?

那么在局部,比如100个像素群中,我就让一半像素显示127,一半像素128:

这样离远了看,或者说图片缩小后,就能变相呈现127.5灰度的效果了。

2


   

该如何来进行GIF压缩

在前HTML5时代,任何主流浏览器都可以轻松显示一张GIF图片,但是对于视频却需要借助Flash之类的笨重的技术才能实现。GIF这个格式也因此而流行到现在(MP3流行的原因也类似)。

虽说现在已经有了诸如APNG、Webm、Webp这样的更优秀的格式,不过GIF在短时间内还将会是主流,所以GIF压缩还是可以学一下的。

压缩GIF思路其实很简单,GIF不过是一张张图片组合起来,想要压缩GIF无非就以下几种办法

  1. 减少GIF帧数

  2. 减小GIF尺寸

  3. 减少GIF颜色

  4. 擦除重复像素(优化透明像素)


3


   

网站

先从最简单介绍起,连软件都不用下载,直接打开以下网站就能用了。

3.1


  

EZGIF

网址:https://ezgif.com/optimize

这个网站其实在视频转GIF那篇里面就介绍过。网站为全英文,如果看不懂,请使用Chrome浏览器的「翻译」功能

▲Chrome浏览器自带功能

下面以翻译过后的网页简单介绍一下。

网站功能非常强大,如果要压缩GIF,调整大小是最简单粗暴的解决办法。

▲一般用这两个

除此之外,一般是靠优化各项设置来压缩GIF,比如减色、删除部分帧、GIF有损化...

具体每项都还能进行进一步的设置

▲应该很好理解吧

颜色越少,删除帧越多,压缩等级越大,GIF越小,质量越差。


3.2


  

压缩图

网址:https://www.yasuotu.com/gif

通过帧数抽取(即减少帧数)和调整压缩等级就能压缩出不错的GIF,当然,缩小GIF尺寸能大大减小GIF大小。

▲功能比EZGIF要少一点

4


   

软件

但其实阿虚不是很推荐网站。

因为如果你的GIF比较大,网站处理起来很费时间(毕竟用的是别人的服务器在帮你处理),而且还很容易出现——服务器繁忙或者说网站崩溃等情况......

▲没错,就比如这样

所以很多时候还是必须得靠软件


4.1


  

PP鸭

官网:http://ppduck.com/(软件支持WIN 和 MAC

因为经常使用,所以阿虚就弄了个单文件版,下载方式请看文末。

PP鸭的用法很简单——图片拖进去,就能帮你自动压缩了。

压缩算法还不错,能在保持图片尺寸不变的情况下压出画质不错的图片。

阿虚一般偷懒的时候常用这个

▲使用方法演示

先别说你看到软件上写的:剩余10张可压缩

阿虚最开始也心想:“不激活才给压缩10张?等于强迫付费啊!肯定辣鸡软件!”

但结果我猜大家肯定知道了:

其实「剩余10张可压缩」意思是每次打开软件最多能压缩10张。你重启软件之后,又能再压缩10张了!所以对于大多数人免费版应该够用了。

优点是:这是少数能压缩GIF的图片压缩软件之一,但缺点是:不能指定压缩大小!

等等,你是不是在想,压缩一次不够,那我压缩两次不就行了嘛。但那是不行滴:

所以,轻度用户可以用这个,而如果对GIF压缩有具体需求的话,请继续往下看。

别看上面的演示图中能把4M的图片压缩64%,压缩到1.5M,就以为这款软件压缩效果逆天了。只是因为这张GIF是阿虚自制的超高清GIF(几乎无压缩),所以用压缩软件压缩效果才会这么好

 

4.2


  

Ulead GIF Animator

如果老板指定了图片得压缩到???KB以下的时候怎么办呢?

这个时候就得拿出神器了:Ulead GIF Animator

相信这是很多人耳熟能详的一个老软件了,甚至在动画界可能算是必会的一个软件,一般简称为UGA

随着开发商友立被几次收购转手,它也不再更新了。最后一次更新大概是2002年,版本号5.10,但17年后它仍然是专门处理GIF的最佳工具之一!

阿虚大概从12年开始使用这款软件,当时还在玩这种图:

哈哈哈哈哈哈哈哈,原来阿虚还在贴吧写过教程:(话说这帖子竟然还在,百度把之前删除的17年前的帖子又恢复了?)

扯远了,回来接着讲。

这款软件汉化版原本有BUG,在优化GIF的时候会弹出服务器正在运行中,然后就导致无法保存GIF且无法关闭软件:

后来终于有吾爱破解论坛的大佬出了一个修复补丁:

于是阿虚就做了一个单文件版:

终于打造出没有BUG还带汉化的真·神器

好了好了,打开软件

一般我们需要选中这个图层,然后按键盘上的Delete键删掉它

或者右键这个白色图片删除它

然后你可以从左上角导入GIF

当然,阿虚一般是直接把GIF拖进去。

导入GIF之后,会提示一个插入帧选项,点确认即可;然后一般情况GIF会显示不全,这时需要按快捷键Ctrl+R来修正画布到GIF的尺寸。

这个工具过于强大:你可以调节图像尺寸、裁剪画面、逐帧编辑、控制帧率、添加文字横幅、帧特效、调整调色板和抖动级别等等,而今天只介绍一下其中的冰山一角——GIF优化。(以后应该还会写很多关于此软件的教程)

点击优化标签

就是下面这个界面了(避免大家手机上看不清,把重点部分进行了放大)

颜色256指的是当前图像调色板的颜色数量,抖动0表示关闭,100表示最大。

最左侧是一些预设值,比如图片256表示调色板256,抖动100/艺术线条128表示调色板128,抖动0,很直观。

抖动是意思什么没忘吧?——通过相邻的像素显示不同的颜色(或灰度)来模拟出一个原本不存在的颜色(或灰度)。

所以如果是照片视频这种真实影像就尽量调高抖动,而动漫动画等大量单一色块的图像则应该调低抖动避免噪点。

调节的结果会实时显示在界面中,同时还会提示GIF文件的尺寸。

可以看到,我把颜色调整到48,抖动开到100后,图片又原来的4M缩小到了2M(2015KB)

如果认为画质已经够好,就适当减少调色板的颜色数,GIF尺寸会下降很多。倘若发现画质下降太大还可以改回来。

一直调整到自己满意的画质和大小之后,左上角找到保存,保存为GIF即可

顺便科普一下UGA优化面板里面的一些设置:

UGA默认开启「移除多余像素」这个功能的

移除多余像素是什么意思?

你会发现在ScreenToGif的高级选项中也有类似的「检测未更改的像素」

而且在保存时也会提示正在「分析不变像素」

GIF的帧和帧之间,其实有很多颜色是一样的。所以,我们可以将这些颜色一致的区域视作背景,保存下一帧的时候,和背景重合的像素都保存为透明像素,这样就可以省去保存很多与背景像素一模一样的像素的色彩信息。

例如,上面的GIF图像,后面的几帧,四边使用透明像素:

加大透明区域,就可以省去更多重复的色彩信息,从而进一步压缩尺寸,这就是透明度优化。

来源:https://segmentfault.com/a/1190000000436384

比如阿虚这张图,在移除多余像素之后,在电脑看来(或者说电脑存储的信息),其实是这样的:

第2帧没有填充颜色的部分,是因为这部分颜色和第1帧相同,所以第2帧电脑就不存储这部分不变的像素的信息。(后面的第3帧同理)

那种背景纯色的视频,文件能被压缩到很小,也是基于同样的原理。

那交错又是什么?

交错其实是由于以前网速慢而搞得一种网页图片显示算法:

如果你选择「无」,在网页加载时是是自上而下的显示出来。(加载网页的时候加载半截的图看过吧?)

如果你选择「交错」,在网页加载时候是先全部打开,是从不清楚再慢慢的变清楚的显示出来。

但现在网快了,基本看不出大的区别。不是做网页的话可以选择无,因为交错的方式保存会让图片更大。


5


   

软件下载方式

今天分享了两个软件:PP鸭 和 Ulead GIF Animator单文件版

如果想下载这两个软件,请关注微信公众号:阿虚同学

在公众号聊天框发送:GIF压缩

后台就会自动回复下载地址了


这一篇之前有讲过GIF录制视频录制视频转GIF

另外相关的,之前也推荐过 视频压缩 的软件

关于Ulead GIF Animator,其实原来就写过用它来做 动态二维码
再发散一点,你可能会感兴趣:图片放大清晰化
如果你好奇阿虚怎么能把这么多软件用得过来,你可以看看这篇:学会它,你的桌面再不需要快捷方式!

ε=(・д・`*)ハァ… 

忽然发现一个很严重的问题

好像几乎没时间写公众号了

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存