图片处理那些事--gif动图转webp
本想着只用一个章节，把gif处理那些事全部展示出来，码着字渐渐发现分支非常多，不适合放在一个页面，于是有了“图片处理那些事”这样一个专题，专门讲解图片优化的技巧。本章节主要讲如何把体积较大的gif动图转换成体积较小的webp动图。
前些天
前些天老师让我讲讲Web应用中的图片处理，查阅了些资料做了些实验，最后做了个文档出来：Web应用中的图片优化.docx
至少我自己学到了不少：chrome自带的性能分析与优化建议、以淘宝京东为例去分析他们的图片使用，对我来说都是新的知识与经验积累。
里面提到了最常用的关于如何优化图片体积、如何缩短网站加载图片时间的方法，直到几天前想着放两个动图到网站上，才意识到，我漏了一个重点没有讲。
文档里提到了webp的好处：在肉眼识别无差异的前提下，webp兼有jpg的小体积和gif的支持透明背景、支持动画的优点，但其实推荐的所有压缩网站都没用提供转换成webp动图的功能，普通的PS也是不能导出webp格式的，所以此处补上两个链接：在线gif转webp：https://convertio.co/zh/gif-webp/
sojson在线工具：https://www.sojson.com/image/format.html
两个工具都只是简单的转换，不支持压缩率的调整，convertio.co支持多图操作，而sojson只能单个图，但sojson的处理速度会更快。
webp
最早接触到webp是在Google+上，本来就是谷歌自家的东西，自然最早用在自己的产品上。当时查阅了下相关资料，使用还没那么普遍，但当我前些天分析淘宝京东网页的图片的时候，发现已有好一部分图片是webp格式了。
京东网页版的商品图大量使用webp格式
作为一个用户来说，浏览一个网站的时候自然希望有更快的速度体验、更少的流量消耗。虽然总是说5G多快多稳，但那是很理想状态下的，想想平时在宿舍、在教学楼的网络体验，事实上发展到什么地步，普及范围有多广，我们是能切身感受到的。其中的原因很多，而在那样一个高稳定、快网速、足够普遍的网络时代还没有彻底到来之前，更高压缩率的图片格式本该快速普及开来，以提高用户体验，可惜现实并不是一个算法题那么干脆。
截止写下这篇文章的时候，edge（44.1）跟Firefox（71.0）已经支持webp了，而Safari跟ie还不行。这自然不是技术上的问题，甚至有插件使得Safari支持该格式，更多的是利益问题。因为他是谷歌家的东西，若果主流的浏览器都在使用，一旦成为业界公认的标准，将会给谷歌带来收益，苹果用户的数量不必说，ie的用户量其实也还很大（见下图，最新的可以在这里查看）
2018年至2019年桌面端浏览器份额只要他们不提供支持，谷歌就没法独大。Safari跟ie的不支持表明了苹果与微软的态度，所以我们只能期待。
gif动图转webp动图
线上的转换工具固然方便，但也正是这种方便带来了自身的缺点：图片的隐私安全、需要网络上传下载。而很不巧，这次PS没那么强了，他原生不支持webp格式（目前到Photoshop2020），连查看都做不到，更别说编辑了。为什么要强调这个动图呢？因为腾讯智图甚至谷歌的squoosh都只能把gif动图转换成静态的webp，这显然不是我想要的。视频转换成gif导出后通常非常大，减少颜色的方法又会直接导致出现色块，这个时候更加需要足够强的压缩技术。webp虽然在普及，但是转换、编辑工具对他支持的都不多。
谷歌自家的工具
谷歌开发者网提供的官方工具：https://developers.google.com/speed/webp/download
这是个命令行工具，推荐使用64位版，因为32位版总是不成功。解压上述压缩包，进入到bin目录，按住shift在bin目录右击，打开cmd或powershell，把要转换的文件（before.gif为例）复制到改目录，执行以下代码：
gif2webp before.gig -o after.webp -q 75 -lossy -m 6
gif2webp为转换程序
第二个位置输入要转换的文件，这里有个小技巧，可以把文件直接拖到命令行，这样就避免了输入路径的麻烦
-o表示输出
after.webp表示输出文件名与目录，同样可以拖动一个目录到终端
-q 表示质量，默认是75，通常不小于60肉眼就难以分辨
-lossy表示启用有损压缩，如果不开启此项，压缩效果会很不明显
-m 6表示压缩方法，6是最大值，可能会得到更小的文件，但花费的时间也更多
webpcon
也难怪webp普及得那么慢，作为个官方工具，感觉只为了供开发者使用，命令行对普通用户来说实在很不友好，加上如果要批量操作，那还得写脚本，于我而言也是颇不方便。
所以找到了另外的一款工具：webpcon,他提供便携版，解压即用，从目录文件可以看到，其实就是基于官方提供的工具制作了个GUI界面，用的基本都是官方的指令与库文件，但是有个好处，他可以批量操作，并且可以拖动，这就很方便了。
encode是把其他格式的图片转换成webp，decode是把webp格式的图片转换成其他格式。把gif拖动到encode，右上角有设置菜单。
Perset Type:这里有类型选择，估计可以根据图片（picture，广义上的图片）、照片（Photo，指拍摄出来的照片）、手绘、图标与文字做出优化
Quality Factory\Compression Method:质量与压缩方式跟命令行版的一样,数值越大，图片越小
Strength of Deblocking Filter：滤波器强度，可以简单理解为减少色块的强度，越大保留的细节越多
Preserve Metadata：保留元数据
Lossless Mode：无损模式，不建议开启
Auto Filter：智能平衡画质与图片体积，建议开启
Alpha Clean up：修改透明区域下的颜色信息，有助于减小图片体积
Resize：裁剪大小，按需选择是否需要重新设置图片大小可见这个工具的功能还是齐全的，对比命令行这个gui做得很不错。
Pixillion Image Converter
官网地址：https://www.nchsoftware.com/imageconverter/index.html
这是另外找到的小巧而好用的gif转webp软件。同样支持拖动图片到工作区，默认保存路径为当前路径下自动新建的Saved Pictures。压缩方法有无损与有损之分，有损压缩只能调整输出质量。
在实际使用中，webpcon容易无响应，而Pixillion体积小、响应速度快，在两款软件均不支持中文的前提下，还是Pixillion略胜一筹。
写在最后
本以为这么多年过去了（webp2010年问世），Safari会支持webp，结果此时苹果手机在微信中都打不开webp格式的图片。虽然有消息称将会支持，但是目前还是不敢只使用webp。还有一段路要走。
留言