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

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".

  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 disk path. 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 capability 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 WebP 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.

Still need help? Contact Us Contact Us