用JS判断浏览器类型再替换图片链接终究不是一个好的选择，还是需要一个更底层的方法，本文就介绍了用Nginx提供WebP图像，当然你应该提前准备好相应webP图片。
1. 添加 image/webp webp 到 /etc/nginx/mime.types 从而让 Nginx 识别 MIME 类型。
2. 在 /etc/nginx/nginx.conf 中的 http 配置段添加如下：
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
3. 这里以WordPress为例，添加如下规则到/etc/nginx/sites-enabled/example.com：
location ~* ^/wp-content/.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
原理：
浏览器的每个请求头中都带有"Accept"字段,例如Accept:image/webp,image/apng,image/*,*/*;q=0.8；第二步中，我们通过$http_accept拿到请求头中的Accept，~*webp是正则，如果含有webp 那么 $webp_suffix 的值就为 .webp；第三部我们通过try_files 先给uri加上.webp后缀，如果没有找到则使用原有地址，最后如果都匹配不到返回404。