webP图片格式介绍-判断浏览器是否支持webP

webP介绍

WebP是一种现代图像格式，可为Web上的图像提供出色的无损和有损压缩。使用WebP，网站管理员和Web开发人员可以创建更小，更丰富的图像，使网络更快。

与PNG相比，WebP无损图像的尺寸缩小了26％。在等效的SSIM质量指数下，WebP有损图像比同类JPEG图像 小25-34％。

无损WebP 支持透明度（也称为alpha通道），仅需22％的额外字节。对于有损RGB压缩可接受的情况，有损WebP也支持透明度，与PNG相比，通常提供3倍的文件大小。

webP对比jpg

使用七牛imageView2转换格式

通过七牛imageView2转换的图:http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg?imageView2/0/format/webp

不通过imageView2的图:
http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg

webP缺点

1. 兼容性要做处理..
   https://caniuse.com/#search=webP
   

   

   image.png

2. 格式要特殊处理(我司有七牛..imageView2)
   https://blog.qiniu.com/archives/5793
   也可以用imagemin-webp,

gulp-webp,

gulp-webp生成 .jpg.webp/.png.webp格式的webP图片

3. 加载展示会比之前慢，不过可以基本忽略不计
4. 展示不如JPG好看(鲜艳,清晰等等)，不过放到手机上权衡文件大小来说可以接受

判断浏览器是否支持webP

其实很简单，在加载前通过 JS判断下是否支持 webP即可。

// 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];
}
check_webp_feature('lossy',(f,r) =>{
    console.log(f,r)
})

相关材料

google对于webP的介绍 https://developers.google.com/speed/webp
七牛对于webP的介绍 https://blog.qiniu.com/archives/5793