把网站的图片升级到WebP格式吧

WebP格式介绍

WebP是Google开发的一种新的图片格式，它支持有损压缩、无损压缩和透明度，压缩后的文件大小比JPEG、PNG等都要小。因此能够节省带宽，减小页面载入时间，节省用户的流量。

Android和iOS的app只要引入Google提供的解码库，均可以很轻松的支持WebP格式。不过在web上，WebP的支持还不是很普遍，根据Can I Use的数据，目前只有Chrome、Opera浏览器，以及Android的WebView是支持WebP的。可是WebP图片有这么多优势，咱们能不能在web页面中使用呢？能够。这篇文章就来讨论一下这个问题。

把已有的图片转换为WebP格式

要使用WebP格式，须要将你网站用到的图片都制做一份WebP格式的版本，若是你使用CDN服务商，它们通常都会提供转码到WebP格式的选项。如又拍云：

增长这样的配置后，咱们能够经过给图片URL加上相应的后缀，来使用WebP格式的版本资源。

你也可使用webpack、gulp的插件来批量转换图片格式。这里不赘述。

在浏览器中使用WebP格式

由于不是全部浏览器都支持WebP格式，咱们就有两种思路：一个是只在支持WebP格式的浏览器中使用WebP格式；一个是让不支持WebP格式的浏览器能够支持WebP。

姿式一： <picture>标签

<picture>是HTML5中的一个新标签，相似<video>它也能够指定多个格式的资源，由浏览器选择本身支持的格式进行加载。

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

若是浏览器支持WebP格式，就会加载image.webp，不然会加载image.jpg。

即便浏览器不支持<picture>标签，图片仍然会正常显示，只是CSS可能没法正确选取到picture元素。好比在IE8中，下面的CSS就不会起做用：

.picture img {
  width: 100px;
  height: 100px;
}

可是能够这样来给图片写样式：

.image {
  width: 100px;
  height: 100px;
}

即便浏览器使用的是WebP格式的图片，最终仍是会应用img元素的样式。

不过只要使用了html5shiv，使旧的浏览器支持这个标签，CSS选择器就能够正常使用了。

这种方法是最简单的，可是不能做用于CSS中的图片（如背景）。

姿式二：使用JS替换图片的URL。

咱们有不少的页面每每会用到图片的“懒加载”——一般是把图片的URL放在img元素的一个自定义属性中，而后用JS在适当的时机将URL赋值给src属性。用相似的原理，咱们能够根据浏览器是否支持WebP格式，给img元素赋予不一样的src值。

首先咱们须要用JS来判断浏览器是否支持WebP格式，方法是给浏览器一个WebP格式的图片，看浏览器可否正确渲染。这种方法是异步的，因此须要把后续的操做写在回调函数中。咱们能够将结果存储在localStorage中，这样以后就不用再次检查了。

function checkWebp(callback) {
  var img = new Image();
  img.onload = function () {
    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

而后用下面的代码来根据是否支持WebP替换相应的src。

function showImage(useWebp){
  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){
    var src = i.attributes['data-src'].value;

    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

这种方式的优势是能够与已有的懒加载函数相结合。并且使用JS，咱们还能够处理CSS中的图片（如背景图等）。

姿式三：使用JS解码WebP图片

既然WebP的解码器是开源的，那么可否用JS来实现呢？固然能够，有人就用JS写出了WebP的解码器。引入这个JS库，就是将全部的WebP图片用JS解码后转换为base64，而后替换掉原来的URL，这样就可让本来不支持WebP的浏览器正常显示WebP了。这个库的使用方法很是简单，看网页的说明便可。

这种方法的缺点是，由于JS要解码WebP图片，须要在此异步请求src中的URL（不过由于图片自己以前被下载了一次，直接使用了缓存）；并且JS解码比较慢，对性能有影响，可能须要一段时间才能显示出图片来。

---

以上就是在浏览器中使用WebP图片的几种方法，能够根据本身的实际状况选用。在咱们的实践中，使用了WebP格式后，图片的体积广泛缩小了1/3以上，既加快了加载的速度，还节省了用户的流量，咱们十分推荐从如今就开始使用这种格式。