×
广告

WebP进阶篇--Gif2WebP

96
猫的天空之程
2017.01.02 22:53* 字数 734

前几天在看公众号“程序员那些事”,中间有看到一个漫画。
Gif 趣图:现代软件开发流程就是这样的
这个漫画貌似不完整,所以有下面围观群众表示:老板卡带了,结局没了。

截图

图片的源地址,那么问题来了,平常我们在上传图片,如果真的需要上传一张比较大的动图除了截取一段或者转成视频,还有什么别的方法吗?

真相永远只有一个

WebP!

是不是觉得很诧异!别的文章讲的都是如何将PNG,JPG这一类的静态图片转成WebP,竟然连Gif都能转?(开个玩笑,你要是真的诧异了,请去看我的文章视频直播之webp礼物解决方案

WebP对比Gif有太多天然优势,颜色丰富,支持自定义透明,重点是文件大小小啊!我们来看一下前面说的那张图

gif 5.1MB

WebP 1.5MB
什么你看不到图片?Sorry,,Safari不支持WebP,请用Chrome打开文章
WebP 1.5MB 什么你看不到图片?Sorry,,Safari不支持WebP,请用Chrome打开文章

是不是感觉两张质量没有什么大区别,但是大小差距太大了。
讲了这么多废话,进入正题

Talk is cheap, show me the code!

接下来我们就来分析下如何用gif转成webP制作,首先我们需要webP工具包,我是链接
根据各个平台下载大家所需要的平台包,然后打开压缩包在bin下面就会有一个gif2webp的命令行工具。

官方介绍标准的使用方法是

gif2webp [options] input_file.gif -o output_file.webp

然后你去执行了,发现雾草,怎么大小才减少了零点几兆,这时候就要祭出高级使用法了。

First!我们都知道webP有一个压缩率,这个命令行也有这个参数,参数名是

-f 这边输入一个0到100的float

比较通用的是75,所以默认值也是75,但是你运行完,发现还是不对,大小也没小多少。之所以会这样,因为默认是无损的,所以我们要开启有损压缩。

-lossy
    Encode the image using lossy compression.

加了这个之后是不是一下子下降到1.8MB,你就开始想,是不是还能压缩呢?

没错!

这边我们要提到一个压缩方法,gif2webp命令行默认是使用4个压缩方法的,其实上限是6个,但是压缩方法越多,意味着压缩时间越长,当然我们只是单纯的想减少图片大小,所以我们可以再加上一个参数

-m 6

综上我们把命令行的所有参数结合到一起

gif2webp path/source.gig -o path/dest.webp -q 75 -lossy -m 6

最终我们将一张5.1MB的gif压缩到了1.5MB,质量上并没有很大的区别。Unbelievable!!!

写的有点乱,大家见谅见谅。

PS. 现在公众号平台并不支持直接webP上传,但是!你所看到的公众号文章所展示的图片都是被webP转换过的,估计是为了兼容Safari或者IE这种不支持webP的浏览器吧

https://www.zhihu.com/question/26430958
http://weibo.com/2306114930/DC0BJ8dIZ

转载请注明出处!!!

漫漫程序路
Web note ad 1