了解Webp

webp

webp是google开发的一种新图片格式，例如现有的图片格式（jpg,gif,png等等）。

既然已经有了这么多的图片格式了，那为什么还会出这么个新的图片格式呢。

A new image format for the Web

专门为web而生的一种新图片格式。同质量的图片，拥有更小的体积。

据google官方所说

  • 在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
  • 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；

同时webp具备现有图片格式的一些特点，比如：png支持透明，gif动态图，webp也同样支持。

webp格式图片怎么获得(其他格式转webp格式)

Google提供了命令行工具用于将图片转换为webp，在WIN,MAC,Liunx各个平台下都可使用。官方的下载地址（需翻墙访问）

Google提供的工具如下：

cwebp – WebP encoder tool

dwebp – WebP decoder tool

vwebp – WebP file viewer

webpmux – WebP muxing tool

gif2webp – Tool for converting GIF images to WebP

Mac OS X系统下， 可以使用下面的命令快速安装：

1
brew install webp

安装完成后，便可使用上述的cwebp,dwebp这两命令。

  • cwebp 压缩 可以将PNG,JPEG,TIFF图片格式转成webp
  • dwebp 解压 可以将webp格式解压成PNG

命令具体用法不多说，自行参考官网文档。

我们常用的图片格式除了PNG,JPEG外，动图gif也使用比较多。webp想转gif的用到官方提供的gif2webp。

当然我们也可以选择第三方的一些转换图片工具，比如：XNConvert

使用webp做web前端图片优化

目前桌面浏览器Chrome和Opera支持webp，android上的原生浏览器，Chrome,UC也支持。

safari和FireFox也正在尝试支持webp。

那么还有这么多的浏览器不支持。是否有必要使用webp做优化呢。 答案是肯定的，以桌面端为例，Chorme浏览器以占了超50%的使用率。

就喜马拉雅FM web官网Chrome的用户就占了64%。

通过webp的优化，能够加快图片的加载速度，并且还能节省带宽。

那么如果我们想给自己的网站使用webp做优化，需要怎么做呢。

  • (PageSpeed for Apache 或 PageSpeed for Nginx）做自动转换成webp
  • 可以添加额外的应用逻辑来检测客户端，检查客户端支持的格式，并提供最合适的图片格式。

PageSpeed

PageSpeed nginx模块为例

1
2
bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
    --nginx-version 1.12.1

开启模块

1
2
3
// http模块下配置如下:
pagespeed on;
pagespeed FileCachePath "/var/cache/ngx_pagespeed/";

添加过滤项，即图片转换规则

1
2
// server模块下配置如下：
pagespeed EnableFilters convert_jpeg_to_webp,convert_gif_to_png, convert_png_to_jpeg;

了解更多PageSpeed

javascript判断浏览器是否支持webp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
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];
}

nodejs端转webp

1
npm install webp-converter

使用webp-converter转图片格式为webp,模块具体使用查看

最后

最后我们来看一组对比测试，到底使用了webp与不使用相差了多少。（测试数据以及功能来自京东 凹凸实验室）

点击这里进入测试页面（非WIFI访问请注意，打开页面将花费您2M左右流量）

测试结果如下：

那么是不是已经有点心动了，快去尝试使用webp给你的网站做图片优化吧。

参考