WebP图片知多少

2019-12-06

WebP是什么

webp是一种图片格式，由谷歌在2010年推出，后逐渐被一些大公司使用。

WebP优势

webP是一种支持有损压缩和无损压缩。
根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。
也就是说在相同图片质量的情况下，webp格式的图片要比png和jpg格式要小。
这意味着在一些图片使用比较多的购物商城、新闻网站，使用webp格式可以节省很多流量，提高页面的响应速度。

WebP的不足之处

兼容性

以下是通过can i use得到的结果

目前谷歌、火狐、欧朋浏览器以及安卓系统的浏览器（除sarari）已经可以支持webp格式图片了，遗憾的是ie还不能支持。

解码时间

根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍。

但是WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了

如何制作WebP格式的图片

下面介绍一下一些把jpg、png格式的图片转换为webp格式的工具

1.Google官方工具

在Mac下，可以使用homebrew安装webp工具：

1	brew install webp

安装完命令行工具后，就可以使用cwebp将JPG或PNG图片转换成WebP格式。

1	cwebp [options] input_file -o output_file.webp

options参数列表中包含质量参数q，q为0～100之间的数字，比较典型的质量值大约为80。
示例：

1	cwebp -q 80 image.png -o image.webp

也可以使用dwebp将WebP图片转换回PNG图片（默认）。

1	dwebp [options] input_file.webp

示例：

1	dwebp image.webp -o image.png

其它系统，可以在官网下载 ,然后cmd进入到下载文件的bin目录，输入命令行,进行转换。

2.使用腾讯前端团队出品的工具智图进行在线转换或者下载客户端

3.使用oss阿里云存储图片

如果你的图片是存储在oss上的，恭喜你，进行webp格式的转换就很方便了，根据oss的官方文档，直接在图片地址后面加上后缀 “?x-oss-process=image/format,webp”就可以完成格式转换了。

在页面中使用webp图片

尽管WebP格式的图片存在着一些兼容性问题，但是不妨碍我们在支持它的平台上使用它。
那如何检测浏览器是否支持webp图片呢？

方法1：通过创建一个画布，判断是否支持webp格式

var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
if (isSupportWebp) {
	// ...
}

方法2: 来自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的图片模式，如果浏览器支持webp，那么图片的宽高会大于0，从而返回true,否则返回false.

使用方法：

第一个参数feature可以传 lossy,lossless,alpha,animation中的一个，第一个传个回调函数。获取他result。如果支持，返回ture,否则返回false。可以再谷歌和IE下试试，谷歌返回ture，IE返回false

1
2
3

check_webp_feature('lossless',function(feature,result){
    alert(result); //true or false
});

方法3:通过加载一张base64格式的webp图片来判断浏览器是否支持，如果图片可以正常加载，则种一个cookie

(function(doc) {

    // 给html根节点加上webps类名
    function addRootTag() {
        doc.documentElement.className += "webps";
    }

    // 判断是否有webps=A这个cookie
    if (!/(^|;\s?)webps=A/.test(document.cookie)) {
        var image = new Image();

        // 图片加载完成时候的操作
        image.onload = function() {

            // 图片加载成功且宽度为1，那么就代表支持webp了，因为这张base64图是webp格式。如果不支持会触发image.error方法
            if (image.width == 1) {

                // html根节点添加class，并且埋入cookie
                addRootTag();
                document.cookie = "webps=A; max-age=31536000; domain=58.com";
            }
        };

        // 一张支持alpha透明度的webp的图片，使用base64编码
        image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
    } else {
        addRootTag();
    }
}(document));