Webp是谷歌推出的适合于Web使用的图像格式，在保持同样质量的情况下可比JPG减小40%的体积。

通过图片压缩网站/插件的处理后，图片的大小可以有效减少，但即便到了极限，仍可能对服务器带宽造成一定压力。在过去的一段时间内，很多网站尝试了WebP。对于小带宽服务器，可以提高打开速度。对于对象存储用户，可以降低流量费用。

随着用户数量的增长，越来越多浏览器对WebP格式的图片进行了适配，但是有一部分针对所有浏览器的站点，仍无法开启WebP格式。但是通过vue，我们可以通过判断浏览器是否支持WebP，并进行图片的调换，来保障所有了浏览器均可访问。

webp: {
bind: (el,vnode) => {
//先判断浏览器是否支持webp
let isWebp = false;
let elem = document.createElement("canvas");
if (!!(elem.getContext && elem.getContext("2d"))) {
isWebp =  elem.toDataURL("image/webp").indexOf("data:image/webp") === 0;
}
//将属性保存在el中
el.isWebp = isWebp;
},
inserted: (el,binding) => {
el.updateImg = (el,binding) => {
if (el.isWebp) {
el.src = binding.value.toString().replace(/\.(png|jpe?g|gif|svg|bmp)$/g, ".webp");
}else {
el.src = binding.value
}
};
el.updateImg(el,binding);
},
update: (el,binding) => {
el.updateImg(el,binding);
}
}
},

在对象存储，也同样可以通过外链调用WebP图片，来减少流量费用。

转换后的图片，部分大小甚至是同内容.png图片的十分之一，可以说对小带宽服务器十分友好了。

对于原为.png和.jpg的图片，可以通过在线转换器进行转换，或者通过对象存储对图片格式进行修改，也十分方便。

通过将图片格式转化为WebP，可以减少费用并且获得更好的网站体验，对于访客和站长都十分友好。