Configure NGINX to transparently serve WebP files when supported

Note: this won't work properly if you use a CDN system (e.g. Cloudflare).

ShortPixel Image Optimizer has 2 WebP delivery methods, but sometimes neither of them is able to properly serve your WebP files, especially if you have an NGINX server (which doesn't support .htaccess files). If this is your case, assuming that you have properly configured ShortPixel to generate WebP files, the best option you have is to use NGINX's capabilities and transparently serve the WebP version of your original file when supported, under the same URL and extension

The solution is straightforward, albeit manual: edit the NGINX config files, either "nginx.conf" or, if you have a setup with multiple sites, the corresponding config file from "/etc/nginx/sites-available".

This solution represents the version we found to be most successful at accomplishing this task. If it doesn't work as expected or if it it doesn't suit your needs, we recommend you to get professional help from an NGINX expert. Hey, if you find something better, drop us a line too!

  1. Add this block before the server directive:

    map $http_accept $webp_suffix {
        default "";
        "~*webp" ".webp";

    This sets the $webp_suffix if the browser has the WebP capability.

  2. Add this block inside the server directive:

    location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
        set $base $1;
        set $webp_uri $base$webp_suffix;
        set $webp_old_uri $base.$2$webp_suffix;
        set $root "<<FULL PATH OF WP-CONTENT PARENT>>";
        root $root;
        add_header Vary Accept;
        if ( !-f $root$webp_uri ) {
            add_header X_WebP_SP_Miss $root$webp_uri;
        try_files $webp_uri $webp_old_uri $uri =404;

    Make sure you replace <<FULL PATH OF WP-CONTENT PARENT>> with the actual absolute path to the wp-content folder, including the folder itself. Example: /home/john/public_html/wp-content/
    You might need to also replace wp-content if you have a custom WordPress installation, or you have just a totally different website platform. The header X_WebP_SP_Miss is not necessary but it's useful for testing - it will set this header if the browser has WebP capabilities but no WebP version of the image was found on disk. You can deactivate it later by commenting out the whole if directive.

  3. Disable ShortPixel's native delivery method. Go to Settings > ShortPixel > Advanced and uncheck the box "Deliver the next generation versions of the images in the front-end":

CAVEAT: This block of code could, in some cases, interact with previous configurations and lead to unexpected results. Please check the image delivery carefully after inserting it. If you notice any issues, just remove the block of code, or use professional help to edit it in order to fit your particular server configuration.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us