0

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

问题是 Edge 浏览器不支持 .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。

4

1 回答 1

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
于 2021-11-17T22:21:37.830 回答