用PS十倍无损压缩GIF动效图

我很少写工具教程,这次是因为被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占用空间2.2M

颜色压缩

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

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

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

1:1查看图片
放大查看图片

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

自动删减颜色

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

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

手动删减颜色

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

选中可以删掉的颜色

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

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

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

这张GIF占用空间0.76M

尺寸

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

——

未经允许请勿转载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,042评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,996评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,674评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,340评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,404评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,749评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,902评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,662评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,110评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,577评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,258评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,848评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,726评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,952评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,271评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,452评论 2 348

推荐阅读更多精彩内容