对于支持webp的浏览器，如何使nginx用.webp重写.jpg和.png

Question

我正在尝试将nginx配置为向支持该格式的浏览器提供webp图像。正在关注this digital ocean tutorial 但卡在重写部分。

我尝试了以下方法，但均无效：

尝试1：

map $http_accept $webp {
    "~*webp" "webp"
}

location ~* \.(jpg|jpeg|png) {
    try_files $uri$webp $uri =404;
}

尝试2：

map $http_accept $webp {
    "~*webp" "webp"
}

location ~* \.(jpg|jpeg|png) {
    rewrite $1.\$webp redirect;
}

但是这些都不起作用。我试图弄清楚如何重写以下重写块-如上述链接教程中提到的.htacess

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

我对vhost的完整nginx配置是here。

正在寻找实现方向的指南。当前，如果我将webp图像重命名为image.jpg.webp或image.png.webp或image.webp，则第一次尝试有效。

我无法弄清楚如何替换所请求文件的扩展名，而不仅仅是在其后附加.web。