image-tiny通过PNG无损压缩为CDN节省流量

前言

PNG图片，是用户终端非常常用的图片格式。其清晰度出众，也是众多图片方案的首选。然而高清晰度带来的就是图片体积的增大，传输效率的降低，客户流量的浪费以及高昂的CDN带宽成本。

图片有损压缩与无损压缩

通常图片压缩有有损压缩和无损压缩

1. 有损压缩的典型代表就是改变文件格式使用更小体积的格式如jpg。但是由于是有损压缩，减小体积的同时带来的副作用就是清晰度下降。
2. 通过降低图片像素数据来减小体积，通常做法是减小分辨率或者是降低色值。但是对于PNG来说会损失清晰度。
3. 无损压缩的典型代表就是tinify。其优秀的算法，支持众多图片格式的无损压缩。是我们常用的工具。但是对于免费用户使用频次有限制。如果集成到基建的CDN源站也要付费。

一个开源的PNG无损压缩中间件服务image-tiny

PNG图片的压缩原理很简单，总结一句话就是：通过减少颜色数量，可以将24位PNG文件转换成更小的8位索引颜色图像。 所有不必要的元数据也被丢弃。。

因此只要按照这个思路去做就可以实现PNG的无损压缩。imagequant就是一个非常著名的PNG无损压缩的开源项目，遗憾的是它只是一个基础库，而image-tiny则是基于imagequant进行的二次封装，并且为了更方便接入现有公司的CDN基建而设计的一个PNG图片处理中间件服务。虽然没有tinify那样优秀的算法实现更大的压缩比。但是目前测试相差在5%以内。

image-tiny是一个开源项目，使用golang实现，这里是源码地址image-tiny源码

使用image-tiny

image-tiny的设计是非常简单的。通常来讲仅需对现有CDN图片管理系统做一个简单的改造即可实现，而用户侧是无任何感知的。

正式因为这种方式，所以可以很容易对现有的CDN图片资源发布系统进行改造，仅仅改造前端即可，直接将调image-tiny接口的返回值推送到现有的源站服务上面。

接口的使用方式也比较简单：

  $ curl --location 'localhost:8080/compress' --form 'file=@"/Users/user/Documents/WorkDocs/image-tiny/demo.png"'

这里要注意，返回的是图片文件的二进制数据。如果想直接使用，需要转blob类型数据。

    var xhr = new XMLHttpRequest();
    xhr.open('post', '/compress');
    xhr.responseType = "blob";
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        var img1 = new Image()
        img1.src = URL.createObjectURL(xhr.response);
        document.body.append(img1);
      }
    }

当然也提供了一个简单的Web页面进行操作。当然了。既然是简单Web页面那就是非常简单的页面了： 一个简单到只能用简陋来形容的页面。当然了，代码是开源的。如果你想使用的话，自己美化吧。反正我不是美工。

通过PNG无损压缩，平均可以减少40%以上的PNG体积，透明度面积越大，压缩比例越高。因此，可以降低非常多的CDN流量，从而降低CDN的使用成本。收益是非常可观的。

最后

基于强大的Golang可以很容易嵌入各种C库的特点，对于其他图片格式，因为有很多C的图片处理库，也可以很容易嵌入。可以参考这个项目作为参照，支持更多的图片无损压缩。

嗯，就是这样吧。