.AVIF和.WEBP的Nginx规则

Question

我正在使用WordOps脚本设置我的LEMP服务器。它已经有了提供.webp和.avif镜像的规则，我已经在我的网站上生成了.webp和.avif镜像。

问题是边缘浏览器不支持.avif图像，它将显示空白，而不是加载.webp或jpg图像。

其他浏览器，如Chome和Firefox，.avif加载得很好，网站运行速度也很快。

我需要重写Nginx规则，这样当人们使用Edge或Safari打开我的网站时，它会将支持的图像文件加载为.webp或.jpg，而不是.avif。

以下是当前的规则：

# webp rewrite rules for jpg and png images
# try to load alternative image.png.webp before image.png
location /wp-content/uploads {
   location ~ \.(png|jpe?g)$ {
       add_header Vary "Accept-Encoding";
       more_set_headers 'Access-Control-Allow-Origin : *';
       more_set_headers  "Cache-Control : public, no-transform";
       access_log off;
       log_not_found off;
       expires max;
       try_files $uri$webp_suffix $uri$avif_suffix $uri =404;
   }

我发现这里有一个很好的条件，https://vincent.bernat.ch/en/blog/2021-webp-avif-nginx

http {
  map $http_accept $webp_suffix {
    default        "";
    "~image/webp"  ".webp";
  }
  map $http_accept $avif_suffix {
    default        "";
    "~image/avif"  ".avif";
  }
}
server {
  # […]
  location ~ ^/images/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix$webp_suffix $uri$avif_suffix $uri$webp_suffix $uri =404;
  }
}

但是，我不能合并规则使其在我的网站上工作。我总是收到Nginx错误。

规则在文件wpcommon-php74.conf中。

Answer 1

以下是我几天前在我的一个网站上几次尝试失败后完成的规则：

map $http_accept $check_avif {
    ~image/avif  "$uri.avif";
}

map $http_accept $check_webp {
    ~image/webp  "$uri.webp";
}

server {
    ...
    location ~ \.(png|jpe?g)$ {
        add_header Vary Accept;
        try_files $check_avif $check_webp $uri =404;
    }
}

对于单个图像，我有以下一组文件：

image.jpg
image.jpg.avif
image.jpg.webp