-1

我想使用内容协商让 Nginx 提供 AVIF 图像，然后是 WEBP 图像，并根据浏览器支持的内容回退到原始 JPEG 图像，我找到了以下代码：

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;
  }
}

但它的工作方式与我需要的有点不同。我将尝试解释它的作用。

想象一下，我们在页面上有这个图像 /images/thumb.jpg：

  • 如果浏览器支持 AVIF，Nginx 会提供以下文件 /images/thumb.jpg.avif：
  • 如果浏览器支持 WebP，Nginx 提供以下服务 /images/thumb.jpg.webp：
  • 如果浏览器同时支持 AVIF 和 WebP，Nginx 提供以下服务 /images/thumb.jpg.webp.avif：
  • 如果浏览器仅支持 JPEG，Nginx 会提供以下服务： /images/thumb.jpg.

现在让我解释一下需要做的事情。

我有这样的图像 HTML 代码：

<img src="image.jpg" srcset="thumb.jpg 1x, thumb@2х.jpg 2x, thumb@3х.jpg 3x" />
  1. 我需要 Nginx 来替换srcset属性中缩略图的扩展名，
  2. 我不需要扩展来叠加，thumb.jpg.webp.avif我所有的缩略图都是这样的：thumb.jpg，，，，thumb.webpthumb.avif
  3. 此外，我在不同页面上的缩略图位于不同的文件夹中，而不仅仅是 in /images/，
  4. 我不想更改src属性中图像的扩展名。

所以基本上，我需要这个：

<img src="image1.jpg" srcset="/file/thumb.jpg 1x, /file/thumb@2х.jpg 2x, /file/thumb@3х.jpg 3x" />
<img src="image2.jpg" srcset="/image/thumb.jpg 1x, /image/thumb@2х.jpg 2x, /image/thumb@3х.jpg 3x" />

如果浏览器支持 AVIF 和 WEBP，则服务如下：

<img src="image1.jpg" srcset="/file/thumb.avif 1x, /file/thumb@2х.avif 2x, /file/thumb@3х.avif 3x" />
<img src="image2.jpg" srcset="/image/thumb.avif 1x, /image/thumb@2х.avif 2x, /image/thumb@3х.avif 3x" />

如果浏览器支持 WEBP，但不支持 AVIF，则提供如下服务：

<img src="image1.jpg" srcset="/file/thumb.webp 1x, /file/thumb@2х.webp 2x, /file/thumb@3х.webp 3x" />
<img src="image2.jpg" srcset="/image/thumb.webp 1x, /image/thumb@2х.webp 2x, /image/thumb@3х.webp 3x" />

请注意，我根本不想更改 image1.jpg 和 image2.jpg 的扩展名。

有可能这样做吗？需要对 Nginx 代码和 HTML 进行哪些更改？

4

0 回答 0