webp图片格式

发表于 分类于 阅读次数： 本文字数： 2.6k 阅读时长 ≈ 2 分钟

2016-06-23引用凹凸实验室

WebP是一种支持有损压缩和无损压缩的图片文件格式，根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。

WebP兼容性
b24c2972.png

WebP命令行工具安装

brew install webp

安装完命令行工具后，就可以使用cwebp将JPG或PNG图片转换成WebP格式。
cwebp [-preset <...>] [options] in_file [-o out_file]
options参数列表中包含质量参数q，q为0～100之间的数字，比较典型的质量值大约为80。

也可以使用dwebp将WebP图片转换回PNG图片（默认）。
dwebp in_file [options] [-o out_file]

WebP优势

下面我们以一张图片为例，分别用不同质量进行压缩。
b3561659.png

技术方案

在浏览器中可以采用JavaScript检测是否支持WebP，对支持WebP的用户输出WebP图片，否则输出其他格式的图片。
JavaScript检测是否支持WebP代码如下：（出自Google官方文档）

function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

在浏览器向服务器发起请求时，对于支持WebP图片的浏览器，会在请求头Accept中带上image/webp的信息，服务器便能识别到浏览器是否支持WebP，在服务器中处理图片。

懒加载图片

采用JavaScript能力检测的方式来加载WebP图片，通常的做法是通过图片懒加载的方式来完成。主要流程如下：
9ce1bf02.png

页面加载会很快，无需等待图片加载。之后，javascript代码会动态地更新图片标签，根据浏览器支持WebP格式与否，动态生成WebP图像或JPG图像链接。

PageSpeed自动转换模块

Google开发的PageSpeed模块有一个功能，会自动将图像转换成WebP格式或者是浏览器所支持的其它格式。

以nginx为例，它的设置很简单。
首先在http模块开启pagespeed属性。

pagespeed on;
pagespeed FileCachePath "/var/cache/ngx_pagespeed/";

然后在你的主机配置添加如下一行代码，就能启用这个特性。
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;
我们可以看下经过转换后的代码：

页面原始代码：

<!doctype html>
<html>
  <head>
    <title>pagespeed</title>
  </head>
  <body>
    <img src="./574ceeb8N73b24dc2.jpg" />
    <img src="./6597241290470949609.png" />
  </body>
</html>

Chrome打开后源码如下：

<!doctype html>
<html>
  <head>
    <title>pagespeed</title>
  </head>
  <body>
    <img src="x574ceeb8N73b24dc2.jpg.pagespeed.ic.YcCPjxQL4t.webp"/>
    <img src="x6597241290470949609.png.pagespeed.ic.6c5y5LYYUu.webp"/>
  </body>
</html>

Safari打开如下：

<!doctype html>
<html>
  <head>
    <title>pagespeed</title>
  </head>
  <body>
    <img src="x574ceeb8N73b24dc2.jpg.pagespeed.ic.3TXX_PUg99.jpg"/>
    <img src="x6597241290470949609.png.pagespeed.ic.rrgw7vPMd6.png"/>
  </body>
</html>

ngx_pagespeed文档