Configure Nginx to transparently serve WebP files when supported

Hi Support

I want to enable webp images on my site, but need to add/change the /etc/nginx/sites-available, to enable it. how do I do this?

This is from ShortPixel:

How to Configure Nginx to transparently serve WebP files when supported

The WebP 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|jpg)$ {

set $base $1;

set $webp_uri $base$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 $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.