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缺点
兼容性要做处理..
https://caniuse.com/#search=webP
image.png
格式要特殊处理(我司有七牛..imageView2)
https://blog.qiniu.com/archives/5793
也可以用imagemin-webp,
gulp-webp生成 .jpg.webp/.png.webp格式的webP图片
加载展示会比之前慢，不过可以基本忽略不计
展示不如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. = function () { var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img. = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
check_webp_feature('lossy',(f,r) =>{ console.log(f,r)
})
作者：kyle背背要转运
链接：https://www.jianshu.com/p/8ef688c64401
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
