图片深度无损压缩解决方案

本功能需要先申请 TinyPNG Developer API Key 才能使用。

• 首先在src/static/目录下创建tinypic目录

└── src
    └── static
        └── tinypic

• 将所有需要压缩的图片放在tinypic目录下 比如：

└── src
    └── static
        └── tinypic
            ├── view.png
            ├── bg
            │   ├── index_bg.jpg
            │   └── sale_bg.jpg
            └── index
                ├── bower.jpg
                └── node.png

• 在项目fez.config.js配置在tinypng.com申请的apikey

//fez.config.js
export default {
  tinypic: {
    apikey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx'
  }
}

• 在项目目录执行gulp tinypic，压缩后的所有图片将被保存在src/static/images/目录下

└── src
    └── static
        ├── tinypic
        └── images
            ├── view.png
            ├── bg
            │   ├── index_bg.jpg
            │   └── sale_bg.jpg
            └── index
                ├── bower.jpg
                └── node.png

压缩命令完成后tinypic目录默认不保存原图片，images中的图片目录结构和原先tinypic图片目录结构保持一致

高级配置

keep

Type: boolean
Default: false

保存tinypic目录中源图片

export default {
  tinypic: {
    apikey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    keep: true //是否保存 tinypic 目录中的源图片
  }
}

相关说明

Tinypng 是一款 PNG/JPG 图片压缩工具，拥有非常牛X的算法，压缩率能达到 50% 以上，图片在压缩之前和之后几乎看不出差别。

Tinypng 在设计师人群中比较流行，它的原理是通过合并图片中相似的颜色，通过将 24 位的 PNG 图片压缩成小得多的 8 位色值的图片，并且去掉了图片中不必要的 metadata（元数据，从 Photoshop 等工具中导出的图片都会带有此类信息），这种方式几乎能完美支持原图片的透明度。

Tinypng可以在线使用，还可以通过其提供的 PhotoShop 插件来导出图片，$50 美刀的价格也略贵(好东西都是收费的)，Tinypng 提供了 HTTP API，使用之前需要先申请 key，免费版每月可以处理 500 张图片，对于一般项目来说够用了。