前言Webp是Google推出的一种图片格式。它可以保持相同的质量，体积比JPG小40%。它可以大大节省带宽使用并提高网站加载速度。由于它是一种新推出的格式，因此某些较旧的浏览器不支持它。那么有没有办法让支持这种格式的浏览器加载webp图片，让不支持的浏览器加载普通图片呢？本文将与您分享解决方案。欢迎有兴趣的开发者阅读本文。思路分析如果要实现这个需求，首先要有一个程序，可以将常见的图片格式转换成webp格式。经过一番查找，我们找到了一个名为webp_server_go的开源项目。我们有一个转换程序，那么如何动态调用这个程序呢？我们的需求是根据客户端的情况决定是否返回一张webp格式的图片，然后在nginx中通过反向代理实现动态调用。梳理一下思路：nginx拦截客户端请求，反向代理请求到webp_server_gowebp_server_go收到请求，读取http_header中的浏览器信息，决定是否返回webp格式的图片，最后nginx将webp_server_go返回的内容发送给浏览器编译转换程序发布页面webp_server_go提供了linux安装包。如果您的运行环境满足条件，可以跳过本章直接下载。本程序是用go语言编写的，所以需要安装go开发环境。由于安装过程比较简单，本文不再赘述。按照教程搭建好环境后，我们将项目clone到本地，目录如下：我们打开Makefile文件（推荐GoLand打开），执行文件中的默认命令：如果你的编辑器没有不支持点击图标运行，那么可以在终端进入项目根目录，依次执行以下命令：makecleangobuild-obuilds/webp-server-$(OS)-$(ARCH).执行成功后，会在builds目录下，可以看到适合你当前系统的编译好的应用（如果你的系统是macos，你看到的结果和我的一样，如果是windows，你会看到一个exe文件）。运行转换程序按照官网列出的使用方法，我们在用户根目录下创建一个名为webp-server的文件夹，将准备好的转换程序复制到其中，并在其目录下创建一个名为config.json的文件，write输入以下内容：HOST启动后的服务地址PORT服务端口号QUALITY转换后的图片质量MAX_JOB_COUNT最大并发转换IMG_PATH图片存放路径（客户端访问图片资源时的存放目录）EXHAUST_PATH图片转换为webp后的存放路径（客户端请求时资源，它会先在这里找，如果找不到，就会触发转换程序，转换完成后会存放在这里)ALLOWED_TYPES要处理的图片格式{"HOST":"127.0.0.1","PORT":"8082","QUALITY":"80","MAX_JOB_COUNT":"10","IMG_PATH":"/Volumes/DataStorage/fileStorage","EXHAUST_PATH":"/Volumes/DataStorage/fileStorage/向上loads/cache","ALLOWED_TYPES":["jpg","png","jpeg","bmp"]}最后在终端执行如下命令启动转换程序：./webpServer--config=config.json当你看到如下图的界面，说明服务正常。注意：在大多数情况下，您应该需要此程序静默运行。如果你不想看到这个运行框，那么你需要使用nohup命令来执行程序。例如：nohup./webpServer--config=config.json>/Volumes/DataStorage/logs/webpServer-log.txt&不熟悉该命令的开发者，请移步Linuxnohup命令进一步了解。反向代理客户端请求完成以上配置后，我们就可以配置nginx拦截客户端请求，反向代理到我们上一步搭建好的服务上了。配置如下：所有包含上传的请求都交给webpserver处理：#将uploads目录下的图片反向代理到webpserver进行格式转换位置~^/(uploads)/{proxy_passhttp://127.0.0.1:8082;proxy_set_headerX-Real-IP$remote_addr;proxy_hide_headerX-Powered-By；proxy_set_headerHOST$http_host;最后我们访问网站看看是否成功，如下图：返回的图片已经是webp格式了：
