网站性能优化，对于图片的处理，使图片采用webp格式

网站性能优化，对于图片的处理，使图片采用webp格式，可以大大降低图片size，提高网站性能具有重要意义。但是webp格式有兼容问题，一般是判断浏览器是否支持webp，才采用webp格式。其实，页面种使用动态使用webp格式图片有很多方案，今天主要介绍的是采用Service Workers方案，关于Service Workers，我之前文章也有过介绍，HTML5之离线缓存的方法。主要是用pwa离线方案。本博客就采用Service Workers技术。

利用这一点，我们可以判断支持webp图片，就使用webp图片。我们需要注册一个Service Worker。Service Worker的一大特性就是，它们能够拦截网络请求，这样子，我们就能够完全控制响应内容。使用这个特性，我们能够监听HTTP头部，并决定如何做。

在上面的代码中，我们做了一个简单的检查，判断浏览器是否支持Service Worker，如果支持，注册并安装Service Worker。这段代码代码最好的地方就是做了兼容处理，如果浏览器不支持Service Workers，它们会自动回退并且用户不会注意到其中差别。

接下来，我们需要创建Service Worker文件‘service-worker.js‘，用于拦截正在传递到服务器的请求。

这样就可以通过Service Workers让网站动态加载WebP图片了。