WebP

WebP

Can i use WebP

  1. 根据accept请求头判断

    如果是Chrome浏览器它会在请求头accept中加入image/webp。

    1
    2
    3
    4
    5
    accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

    or 

    accept: image/webp,image/apng,image/*,*/*;q=0.8

  2. 前端检测

    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];
    }

例子

如果使用了内容协商的方式返回了webp格式的图片，在使用CDN或缓存的情况我们需要在响应头加入Vary字段来告诉该如何缓存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
location ~ ^/webp/(.*)\.(jpg|png|gif)$ {
    set $filename    $1;
    # 判断是否支持webp及文件是否存在
    set $swebp       0; 

    # $swebp 第一位用来判断客户端是否支持webp
    if ($http_accept ~* "image\/webp") {
        set $swebp   1;
    }

    # $swebp 第二位用来判断对应的webp文件是否存在
    if (-f "${document_root}/webp/${filename}.webp") {
        set $swebp   "${swebp}1";
    }

    if ($swebp = "11") {
        # add_header Vary   "Accept,Content-Type";
        # add_header Vary   "Content-Type";
        add_header   Vary   Accept;
        rewrite ^ /webp/${filename}.webp break;
    }
}

访问 http://example.kekek.cc/webp/2018-FIFA-World-Cup.png 查看

下面两幅图分别为在Chrome和Firefox浏览器中访问的响应：
Chrome
Chrome WebP

Firefox
Firefox WebP

参考

本站采用「署名 4.0 国际」进行许可。