最近在做公司现有项目的优化工作，其中一项就是将部分静态资源图从原格式转为webp格式。从而在支持webp的浏览器中输出webp格式的图片。由于项目技术栈是Vue + webpack + less。原先所有的静态资源图基本都走webpack来进行版本管理。如此的话，想通过webpack加上js业务逻辑代码，实现webp格式的图片浏览器全兼容，并没有走通。无奈，只有将所有静态资源图放置在根目录下static目录下，此目录中所有的图片不走webpack处理。因此配合自己的业务代码，可以实现webp全浏览器兼容。但如此操作，因不走webpack，所有这些图片的版本管理也失去了。另一个问题是css中的背景图处理。我用less写了一个方法。参数为图片路径，从而实现以上的兼容效果。但我看了network面板，发现，虽然在支持webp的浏览器中输出的是webp格式图片，但原格式图片也依然被载入并占用一个请求。如此的话，似乎css兼容就做的毫无意义了。不知有没有更好的实践？以下为less代码：

.webpbg(@url) {
  background-image: url(@url);
  .webpa & {
    background-image: url('@{url}.webp');
  }
}