WebP 探寻之路，kotlin 环境搭建

更高——为你提供 WebP 图片让你的站点高大上

【功能】

首先看下智图系统的界面

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

1.图片同向对比

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

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

4.图片 WebP 化

5.图片批量处理

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

a

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

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

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

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

![这里写图片描述](https://img-b

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

log.csdn.net/20170206152002557?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9iYnlfZnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

大家都知道 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 化】