一种无损的图片压缩格式-WebP

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

图片加载速度优化全家桶

引入你是否一度因图片加载过慢而放弃打开一个网站，是否曾因图片过大而放弃使用CDN。没关系，今天，图片加载速度优化全...

通过图片压缩网站/插件的处理后，图片的大小可以有效减少，但即便到了极限，仍可能对服务器带宽造成一定压力。在过去的一段时间内，很多网站尝试了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://cloud.tencent.com/developer/article/1867163

本站采用 “署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN)” 许可。 您可转载本站文章，请以超链接形式标明本文原始出处、作者信息以及版权声明。