How to Setup ShortPixel to Serve WebP Images on Nginx

Step 3: Create webp-main-context.conf

We now have 2 options for how to proceed. We can apply our WebP settings server-wide, or just on one specific site. You may find that it’s easier and more convenient to simply apply the changes server-wide. We’ll look at both options below.

Create a Server-wide configuration

The code supplied by Shortpixel themselves only works on individual sites. We’ve modified it so that you can set live for all your sites in one go and then just never need to worry about it.

To set this up, we need to create a file called shortpixel-webp-main-context.conf in the /etc/nginx/extra.d/ directory.

Create the file with the following command:

nano /etc/nginx/extra.d/shortpixel-webp-main-context.conf

Paste the following block of code:

location ~* ^(/wp-content/.+).(png|jpe?g)$ { 
set $base $1; 
set $webp_uri $base$webp_suffix; 
set $webp_old_uri $base.$2$webp_suffix; 
add_header Vary Accept; 
if ( !-f $document_root$webp_uri ) { 
add_header X_WebP_GP_Miss $document_root$webp_uri; 
} 
try_files $webp_uri $webp_old_uri $uri =404; }

Now Ctrl+O and then press enter to save the file. Then Ctrl+X to exit nano. You can now proceed to step 4.

Create a site-specific configuration

For a singular website, we need to create a file called shortpixel-webp-main-context.conf  in /var/www/site.url/nginx .

Create the file with the following, switching out “site.url” with your website’s domain:

nano /var/www/site.url/nginx/shortpixel-webp-main-context.conf

Paste the following block of code, again switching out “site.url” with your website’s domain:

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 "/var/www/site.url/htdocs";
root $root;
add_header Vary Accept;
if ( !-f $root$webp_uri ) {
add_header X_WebP_GP_Miss $root$webp_uri;
}
try_files $webp_uri $webp_old_uri $uri =404;
}

Now Ctrl+O and then press enter to save the file. Then Ctrl+X to exit nano. Proceed to step 4.