Configure Nginx to transparently serve WebP files when supported

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

The WebP images are generated by ShortPixel and they land in the Media Library alongside the JPEG or PNG originals.

In order to serve them, the best option is to use the web server's capabilities and transparently serve the WebP version when supported, under the same URL. The ShortPixel plugin has an option to automatically configure the web servers which support .htaccess but what should you do if you're using Nginx?

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.

Step 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

Step 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;
}

making 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 install, 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.

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