webP介绍
WebP是一种现代图像格式，可为Web上的图像提供出色的无损和有损压缩。使用WebP，网站管理员和Web开发人员可以创建更小，更丰富的图像，使网络更快。
与PNG相比，WebP无损图像的尺寸缩小了26％。在等效的SSIM质量指数下，WebP有损图像比同类JPEG图像 小25-34％。
无损WebP 支持透明度（也称为alpha通道），仅需22％的额外字节。对于有损RGB压缩可接受的情况，有损WebP也支持透明度，与PNG相比，通常提供3倍的文件大小。
webP对比jpg
通过七牛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,
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.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