WebP 探寻之路，推荐一个GitHub项目

从主界面中我们大致可以看出智图分为以下几个功能模块：

1.图片同向对比

2.图片压缩（可手动选择压缩比）

3.图片格式转换（JPEG转PNG或PNG转JPEG）

4.图片WebP化

5.图片批量处理

下面我们通过一个例子来阐述这个智图流程。请看下图：

从上图的例子看出来，在体积这一块几种结果的图片是呈现梯度变化的，首先原图经过压缩成了智图JPEG，其次原图通过图片各项属性的判断，程序认为PNG格式的图片更优，于是选择转换一张PNG格式的图片，最后为所上传的图片生成一张WebP格式的图片，这就是智图整个大致的处理流程，其中由JPEG转成PNG（或者从PNG转成JPEG）这一步程序可能会执行，也可能不会执行，具体的算法是依据该图片的多样属性来判断的。那我们来看看都有哪些属性影响了我们的图片最终格式：

a. 图片的透明度：一张PNG 半透明的图片，如果转成JPEG或者PNG 8格式了，那半透明效果会成为灰度模块，这绝对是用户不能接受的，所以只有不包含半透明元素的图片才会被转换格式。

像这样带圆角的半透明图片，可使用PNG 无损（有损）压缩，或者直接转换为带alpha的PNG 8图片格式。

b. 图片的色值：前面说过，色值丰富的图片，使用JPEG格式会体积会更小，所以当判断一张图片的色彩值比较多的时候，程序可能会

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】完整内容开源分享

由将图片由PNG 转为JPEG，反之亦可。

大家都知道PNG 8的像素存储量只有2的8次方，256个，如果一张颜色丰富的图片转成PNG 8格式的图片，那必定会由于存储量不够而导致某些色彩丢失，这就是失真。事实上，当我们的肉眼看一张图片的时候，会觉得这张图片不就是黄色而已吗，其实追溯到每一个像素点上，我们会发现，其实这张图片里面，密密麻麻分布着各种各样的颜色值或透明度。有一种最傻的方法去获取这些色值总量——那就是逐个像素点去读。

c. 图片的面积：图片的面积可能影响面不大，但毕竟图片都是像素点算的，想想一张1600*1600的图片，每个像素稍微有点透明度的变化，那图片的色值就会非常多了。对于比较小的图片（譬如100*100这种icon级别或者头像级别的），也许选择PNG 8格式会比较适合。

d. 图片的质量：这里指的质量，可以理解为图片在PS里面导出来时候选的那个品质，无损的话这个值便是100。对于程序而言，每张图片都有这样一个属性值，它和PS里的值不完全对应上，但是也有一定的关系。比如说PS里的70%的质量在程序读到的值不是70，而可能是91,75可能对应着93等等。研究表明，一般的有损压缩图片，这个压缩比的值保持在70-80之间便足够了，当然为了追求更小的体积，我们可能将这个值调小。

【压缩】

对于图片的压缩，最常见的分有损，无损压缩。无损压缩譬如去除exif信息，重新排列像素存储方式等，有损压缩譬如合并相似像素，减少可见像素点等。现在这些压缩算法都可以用现成的成熟的库实现，以PHP为例子，可以使用pngcrush做PNG 的无损压缩，pngquant做PNG 的有损压缩。JPEG可使用imageMagick和jpegtran。这里推荐下imageMagick，相对于其他图片处理的库，这个库可控制的功能更多，并且支持多种编程语言。

智图不仅仅是针对JPEG和PNG 去压缩，也会根据图片的属性（透明度，色值，面积，质量等）去判断该图片是否适合转换图片格式，这才是智图想要体现的地方，用户再也不用去担心要生成什么样的图片了。同时为了不强制使用图片格式，智图也会为原格式的图片做处理。

【WebP化】

图片WebP化是智图的另一亮点，也许现在这种chrome内核专用的图片格式还不那么流行，但是我们完全可以根据WebP的特点来做浏览器的优雅降级。由于WebP支持有损无损压缩，同时也支持半透明，所以他完全可以在高级浏览器中代替PNG 或者JPEG。淘宝的广告图和空间的相册浮层，QQ会员算是比较早应用WebP图片，这里空间装扮全量支持WebP的一个很大原因，是因为多数的空间用户使用360浏览器来访问空间，而360浏览器是双核的而且还默认使用chrome内核。而我们这里做的降级很简单，支持WebP的使用，不支持的还是使用JPEG或者PNG 图片。

【批量化】

如果你要处理的图片比较大，没关系，智图支持批量处理，我们会将批量处理完之后的图片打包提供给您下载。

【API】

基于平时需求中大量需要图片的压缩，我们也制作了基于glup的本地插件。

详情可查看智图glup插件

【后序】
事实上，在图片的优化方面，各大浏览器厂家和研究人员都在很努力地尝试更好更优的算法，像firefox也有属于自己APNG格式的图片，微软也有自己WMP。智图系统其实也只是站在这些巨人的肩膀上做一些逻辑上的优化选择，但推动这些优化的发展总要一步一个脚印，现在越来越多的团队也意识到WebP格式的优越性，也尝试着去应用，相信在不久的将来，这些后起之秀，一定可以在图像领域发挥其重要作用，节约我们的成本，提升我们的体验。
最后在大量图片压缩测试之后得出结论，智图在图片压缩方面，JPEG图片可压缩体积20%左右，PNG可压缩体积35%左右，WebP可压缩30%左右。

WebP 探寻之路，推荐一个GitHub项目相关推荐

我的第一个Github项目上线了
2019独角兽企业重金招聘Python工程师标准>>> 5年前,还是2012年的时候,我注册了我的github账号,但是我并没有准备要在这里写代码,只是因为seajs的作者阮一峰在g ...
推荐一个github上万star的机器学习资料整理贴
推荐一个github上万star的机器学习资料整理贴,机器学习,深度学习,自然语言处理等应有尽有!(本文来源:忆臻的知乎) 作者:忆臻春招将近,给大家推荐一个github上万star的资料整理贴,机 ...
【干货推荐】推荐一个 Github
给大家推荐一个 Github,保证干货满满:https://github.com/iamshuaidi/CS-Book
推荐一个github上好玩的工具
推荐一个github上好玩的工具推荐一个github上好玩的工具,给变量取名字,推荐给起名困难户... 地址:https://unbug.github.io/codelf/# 如果你用vscode, ...
一个Github项目搞定微信、QQ、支付宝等第三方登录
今日推荐推荐 7 个牛哄哄 Spring Cloud 实战项目推荐一个非常火爆的电商开源项目! 推荐两个项目! 第三方登录是目前非常常用的登录方式,引入第三方登录的方式可以大大的降低开发的成本,同 ...
【开源项目】一个GitHub项目，囊括人脸图像要读的重要论文
今天给大家分享一个非常优秀的GitHub项目,由GitHub用户ChanChiChoi创建,包括了几乎所有人脸方向的论文,适合需要在人脸领域进行学习的朋友跟读. 项目简介项目地址为https://g ...
一个 GitHub 项目搞定微信登录
第三方登录,基于用户在第三方平台上已有的账号和密码来快速完成己方应用的登录或者注册的功能.而这里的第三方平台,一般是已经拥有大量用户的平台,比如GitHub.微博.微信.QQ 等. 第三方登录可以降低 ...
粉丝推荐的 GitHub 项目 yyds
本期盘点的开源项目由逛逛 GitHub 的读者投稿,如果你或者所在的组织开源了高质量的项目,希望被更多人看到,请扫描下方二维码进行投稿. 同样,你可以关注逛逛 GitHub 后在底部菜单栏找到投稿入口 ...
如何只下载一个github项目的某一特定文件夹或文件
大部分人都会下载一个完整的github项目,无论是git clone命令,亦或是直接download zip文件,但是有的时候,我们不需要下载整个项目,因为下载整个项目可能耗时耗力,我们只需要下载其中 ...

WebP 探寻之路，推荐一个GitHub项目

WebP 探寻之路，推荐一个GitHub项目相关推荐

最新文章

热门文章