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

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

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

directives: {
    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图片,来减少流量费用。
示例:阿里云OSS

转换后的图片,部分大小甚至是同内容.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

最后修改:2020 年 10 月 26 日 01 : 51 PM
如果觉得我的文章对你有用,请随意赞赏