Regla de Nginx para publicar imágenes WebP cuando esté disponible

Estoy intentando server las imágenes del webp a los hojeadores que apoyan usando el código abajo. Ya tengo imágenes .webp además de imágenes .png y .jpg del mismo file.

Por ejemplo si tiene una image nombrada vacation.jpg, también tengo vacation.jpg.webp.

El código de abajo funciona, pero estaba sobrescribiendo mis otros bloques de location antes de cambiar a un CDN. Ahora estoy utilizando CDN que el bloque de código no tiene ningún efecto, no hay imágenes WEBP en respuesta y tampoco sobrescribir mis otros bloques de location.

Aquí es cómo hacerlo:

Añadir a los /etc/nginx/mime.types

“image/webp webp” 

Añadir a la principal nginx.conf file:

 map $http_accept $webp_suffix { default “”; “~*webp” “.webp”; } 

Añadir al bloque de server:

 location ~* ^/wp-content/.+\.(png|jpg)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; } 

Reinicie o recargue nginx.

Ejemplo de mis otros bloques de location:

Deshabilitar Hot-Linking

 location ~ .(ico|gif|png|jpe?g|svg|webp)$ { valid_referers none blocked example.com *.example.com; if ($invalid_referer) { return 403; } } 

Permitir origen cruzado para files de dominio estático

  location ~ \.(ico|gif|png|jpe?|svg|webp|eot|otf|ttf|ttc|woff|woff2|ogg|js|css|font.css)$ { add_header Access-Control-Allow-Origin "*"; #gzip_vary on; expires 30d; } 

La pregunta original fue cambiada completamente después de haber publicado esta respuesta y esta respuesta ya no es relevante para la pregunta.


Aunque su intención es buena, el hecho de que realice una networkingirección 302 cuando se encuentra una versión .webp hace que la ganancia sea menor.

La networkingirección agrega dos vueltas en latencia al time de carga de la image, y si la image es lo suficientemente pequeña, tardará más time en recibir la versión .webp que el original.

Para solucionar esto, debe generar directamente las URL del código de su website.

Sin embargo, para responder a su pregunta actual, puede utilizar este set de reglas:

 location ~ ^(/wp-content.+)\.(jpe?g|png)$ { set $networking Z; if ($http_accept ~* "webp") { set $networking A; } if (-f $request_filename.webp) { set $networking "${networking}B"; } if ($networking = "AB") { add_header Vary Accept; return 302 $1.webp; } } 

La idea aquí es que uno ya ha capturado la primera parte del nombre de file en su directiva de location . Por lo tanto, la primera parte de la nueva location se encuentra en la variable de captura de regex de $1 . Por lo tanto, uno simplemente utiliza el $1 en la directiva de return . Yo uso return aquí, ya que es más rápido que rewrite .