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,可以减少费用并且获得更好的网站体验,对于访客和站长都十分友好。

参考文献:①https://www.zhihu.com/question/27201061https://www.oschina.net/p/webp?hmsr=aladdin1e1
引用文章:①https://blog.csdn.net/qq_28473733/article/details/103005223
最后修改:2021 年 06 月 24 日
如果觉得我的文章对你有用,请随意赞赏