Nginx configuration for the WebP Converter for Media WordPress plugin

To make Nginx work with the WebP Converter for Media you can use the configuration below. It checks if the the browser Accept header allows WebP images and serves the WebP image if that is the case. If the browser does not support it, the original jpg, png or gif is served.

You will need to place the configuration in the server block of your existing configuration and then configure the plugin to use the “via .htaccess (recommended)” method. Even though we don’t use Apache our method works the same as the plugins .htaccess method.

server {
    // ... 

    # Add support for "WebP Converter for Media" WordPress plugin
    # https://wordpress.org/plugins/webp-converter-for-media/
    location ~ ^/wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
        if ($http_accept !~* "image/webp") {
            break;
        }

        expires 180d;
        add_header Vary Accept;
        try_files /wp-content/uploads-webpc/$path.$ext.webp $uri =404;
    }
    // ...
}

If you want to see a more complete example, please see here.