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 “”" ;”;
“”~image/webp” “.webp”;
}
map $ http_accept $ avif_suffix {
default “”" ;”;
“”~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.
davy.ai
¿Puede ayudarme a reescribir las reglas para que funcionen en mi sitio web?
Solución
Puede probar las siguientes reglas de Nginx para servir imágenes .webp y .avif en su sitio web:
Esto debería funcionar para todos los navegadores, incluidos Edge y Safari.