时间: 2021-08-03 10:44:45 人气: 1 评论: 0
所谓智图，我 们将之称为Smart Image，智能图**优化平台，其实是智能转换图**格式的简称。这里可能有人**提出疑问，转换图**格式，不就是JPEG To PNG 或者 PNG To JPEG嘛。是的，但我们在压缩图**的时候，往往根据以往经验或感觉去压然后反复比较，在质量和体积间难以达到平衡，而有了智图，你不需要再犹豫，把图** 交给智图，智图自动识别最优格式并压缩处理。其实我们知道图**都是有一定压缩空间的，并且一张图**合适的格式取决于图**的尺寸，色值，透明度等属性。智图 就是根据一张图**的上述属性，进行对比判断，输出合适的图**格式并进行压缩的一个图**优化平台。使用智图，你可以：
首先看下智图系统的界面
从主界面中我们大致可以看出智图分为以下几个功能模块：
下面我们通过一个例子来阐述这个智图流程。请看下图：
从上图的例子看出来，在体积这一块几种结果的图**是呈现梯度变化的，首先原图经过压缩成了智图JPEG，其次原图通过图**各项属性的判断，程序认为PNG 格式的图**更优，于是选择转换一张PNG格式的图**，最后为所上传的图**生成一张WebP格式的图**，这就是智图整个大致的处理流程，其中由JPEG转成 PNG（或者从PNG转成JPEG）这一步程序可能**执行，也可能不**执行，具体的算法是依据该图**的多样属性来判断的。那我们来看看都有哪些属性影响了 我们的图**最终格式：
a. 图**的透明度：一张PNG 半透明的图**，如果转成JPEG或者PNG 8格式了，那半透明效果**成为灰度模块，这绝对是用户不能接受的，所以只有不包含半透明元素的图**才**被转换格式。
像这样带圆角的半透明图**，可使用PNG 无损（有损）压缩，或者直接转换为带alpha的PNG 8图**格式。
b. 图**的色值：前面说过，色值丰富的图**，使用JPEG格式**体积**更小，所以当判断一张图**的色彩值比较多的时候，程序可能**由将图**由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化是智图的另一亮点，也许现在这种chrome内核专用的图**格式还不那么流行，但是我们完全可以根据WebP的特点来做浏览器的优雅降级。
由于WebP支持有损无损压缩，同时也支持半透明，所以他完全可以在高级浏览器中代替PNG 或者JPEG。淘宝的广告图和空间的相册浮层，****算是 比较早应用WebP图**，这里空间装扮全量支持WebP的一个很大原因，是因为多数的空间用户使用360浏览器来访问空间，而360浏览器是双核的而且还默认使用chrome内核。而我们这里做的降级很简单，支持WebP的使用，不支持的还是使用JPEG或者PNG 图**。
如果你要处理的图**比较大，没关系，智图支持批量处理，我们**将批量处理完之后的图**打包提供给您下载。
基于平时需求中大量需要图**的压缩，我们也制作了基于glup的本地插件。详情可查看智图glup插件
事实上，在图**的优化方面，各大浏览器厂家和研究人员都在很努力地尝试更好更优的算法，像firefox也有属于自己APNG格式的图**，微软也有自己 WMP。智图系统其实也只是站在这些巨人的肩膀上做一些逻辑上的优化选择，但推动这些优化的发展总要一步一个脚印，现在越来越多的团队也意识到WebP格 式的优越性，也尝试着去应用，相信在不久的将来，这些后起之秀，一定可以在图像领域发挥其重要作用，节约我们的成本，提升我们的体验。
最后在大量图**压缩测试之后得出结论，智图在图**压缩方面，JPEG图**可压缩体积20%左右，PNG可压缩体积35%左右，WebP可压缩30%左右。
目前在海量级业务**空间、微信、京东以及原创馆多个项目均已应用了智图系统的压缩机制。
原文来自： **ISUX
