Reglas de Nginx para .AVIF y .WEBP

Estoy usando el script WordOps para configurar mi servidor LEMP. Ya tiene las reglas para servir imágenes .webp y .avif y he generado las imágenes .webp y .avif en mi sitio web.

El problema es que el navegador Edge no admite imágenes .avif y mostrará en blanco en lugar de cargar imágenes .webp o jpg.

Otros navegadores como Chome y Firefox cargaron .avif muy bien y el sitio se ejecuta rápido.

Necesito reescribir las reglas de Nginx para que cuando las personas abran mi sitio web usando Edge o Safari, cargue los archivos de imagen admitidos como .webp o .jpg en lugar de .avif.

A continuación se muestran las reglas actuales:

# Reglas de reescritura de webp para imágenes jpg y png
intentar cargar la imagen.png.webp alternativa antes de la imagen.png

ubicación /wp-content/uploads {
ubicación ~ . (png | jpe? g) $ {
addheader Vary "Accept-Encoding";
moresetheaders 'Access-Control-Allow-Origin: * ';
moresetheaders "Cache-Control: public, no-transform";
accesslog off;
lognotfound off;
expira max;
tryfiles $ uri $ webpsuffix $ uri $ avif_suffix $ uri = 404;
}

Encontré buenas reglas de condición aquí https://vincent.bernat.ch/en/blog/2021-webp-avif-nginx

http {
map $ http_accept $ webp_suffix {
default “”&quot ;”;
“”~image/webp” “.webp”;
}
map $ http_accept $ avif_suffix {
default “”&quot ;”;
“”~image/avif” “.avif”;
}
}
servidor {

[…]

ubicación ~ ^/images/.*.(png|jpe?g)$ {
add_header Vary Accept;
try_files $ uri $ avif_suffix $ webp_suffix $ uri $ avif_suffix $ uri $ webp_suffix $ uri = 404;
}
}

Sin embargo, no puedo combinar las reglas para que funcionen en mi sitio. Siempre obtengo errores de Nginx.

Las reglas están en el archivo wpcommon-php74.conf.