图像优化技术List

[miniflycn]

可用技术一览

• progressive image
• 通常格式无损图像压缩（optipng）
• 基于算法的有损图像压缩（mozjpeg）
• WebP图像压缩（webp）
• BPG图像压缩 （BPG）
• 矢量图像（fontIcon，svg）

  progressive 检测工具

is-progressive

通用性

请围观：http://caniuse.com

特性检测

• webp前端检测 原理上是加载一个webp图片，看看能否获取正确的图片长宽

var webp = "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
    supportedWebp;

function isSupportWebp(cb) {
    if (supportedWebp !== undefined) return cb(supportedWebp);
    var img = new Image();
    img.onload = function () {
        supportedWebP = this.width === 2 && this.height === 1;
        cb(supportedWebp);
    };
    img.onerror = function () {
        supportedWebP = false;
        cb(supportedWebp);
    }
    img.src = webp;
}

• webp后台检测 通过HTTP Request Header来检测

Accept头，例如，请求图片时Chrome浏览器是：

Accept:image/webp,/;q=0.8

相关资源

• mozjpeg & webp
  1. Lossy Compressed Image Formats Study

     待翻译文献

http://people.xiph.org/~xiphmont/demo/daala/demo1.shtml

[miniflycn]

基于PhantomJS来看看自己的站点是Progressive JPEGs，还是Baseline JPEGs：

https://github.com/miniflycn/optimg/issues/2