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.

  • Nithin

    Hi Rawson,

    At the moment, I'm afraid we don't support adding custom rules in NGINX config files. This feature is something which our developers are looking to implement down the roadmap, so such rules could be applied.

    Smush Pro, by default supports WebP conversion once Smush CDN is enabled. Could you please check whether that would help in covering your requirements?

    If Smush Pro doesn't fit to your needs, and if you are still looking to add WebP within server side as mentioned above, then please let us know, so that we could check with our team to see whether it's something that could be manually added in your server side.

    Regards,
    Nithin

  • Kasia Swiderska

    Hello Rawson,

    - When on the roadmap do you expect us to be able to edit our Nginx config files? are there any estimates on time?

    I'm afraid there is no ETA for this feature.

    - If I needed to modify the script in any way, I presume I would then have to put in a support ticket?

    There is no need, this is already supported ticket. I have sent a message to our sysadmins if making this change will be possible now and we are waiting for their decision. We will keep you posted.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.