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/27201061 ②https://www.oschina.net/p/webp?hmsr=aladdin1e1
引用文章:①https://blog.csdn.net/qq_28473733/article/details/103005223
版权属于:何叶
本文链接:https://www.onyi.net/archives/423.html
本站采用 “署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN)” 许可。 您可转载本站文章,请以超链接形式标明本文原始出处、作者信息以及版权声明。
7 条评论
不知道Apple支持Webp了没有
要是支持了我也上WEBP
WebP是好东西,不过不懂技术,只能依靠插件配合阿里云OSS转换,好多地方还是加载原格式。等流量起来了再考虑改造吧。。。
宝藏博主!φ( ̄∇ ̄o)
文章不错非常喜欢
赞!混个脸熟,博客真好看ヾ(≧∇≦*)ゝ
webp是个好东西
Webp同时提供无损和有损,但是有损压缩出来的图片糊的不能看了