Adding Smush Local WebP and Imagify WebP support

Smush and Imagify provide directives for serving WebP images in place of .png and .jpg images. In SpinupWP, caching configurations in the static-files.conf file already has a location block that matches .png and .jpg images, so the directives from Smush and Imagify are overwritten. Below we’ll cover how to add these directives so you can serve WebP images using these tools.

To add these directives, you’ll need to edit Nginx config files which requires sudo access. We recommend referencing our Changing Nginx Settings doc when editing Nginx files to ensure there are no issues.

1. Adding the Smush Local WebP directive
2. Adding the Imagify WebP directive
3. Customizing Nginx to enable the Smush and Imagify directives
4. Purge Cloudflare cache

Adding the Smush Local WebP directive

To add the Smush Local WebP directive:

1. Create a file called smush-webp.conf in the /etc/nginx/sites-available/{DOMAIN}/server/ path with the following, switching out {DOMAIN} with your website’s domain:

   nano /etc/nginx/sites-available/{DOMAIN}/server/smush-webp.conf
   

2. Paste the following block of code, again switching out {DOMAIN} with your website’s domain, then save the changes and exit the editor:

   location ~* "wp-content\/(uploads\/)(.*.(?:jpg|jpeg|jpe|png|gif))" {
       expires 1y;
       add_header Vary Accept;
       set $image_path $2;
       if (-f "/sites/{DOMAIN}/files/wp-content/smush-webp/disable_smush_webp") {
           break;
       }
       if ($http_accept !~* "webp") {
           break;
       }
       try_files /wp-content/smush-webp/$image_path.webp $uri =404;
    }
   

Adding the Imagify WebP directive

To add the Imagify WebP directive:

1. Create a file called imagify-webp.conf in the /etc/nginx/sites-available/{DOMAIN}/server/ path with the following, switching out {DOMAIN} with your website’s domain:

   nano /etc/nginx/sites-available/{DOMAIN}/server/imagify-webp.conf
   

2. Paste the following block of code, save the changes and exit the editor:

   location ~* ^(/.+)\.(jpg|jpeg|jpe|png|gif)$ {
       expires 1y;
       add_header Vary Accept;
       if ($http_accept ~* "webp"){
          set $imwebp A;
       }
       if (-f $request_filename.webp) {
          set $imwebp  "${imwebp}B";
       }
       if ($imwebp = AB) {
          rewrite ^(.*) $1.webp;
       }
   }
   

Customizing Nginx to enable the Smush Local WebP and Imagify WebP directives

We’ve added the code for the WebP directives but we still need to enable them. We’ll do this by editing the static-files.conf file:

1. Edit the static-files.conf file, located at /etc/nginx/sites-available/{DOMAIN}/server/static-files.conf, switching out {DOMAIN} with your website’s domain, which should look like the following:

   # Caches images, icons, video, audio, HTC, etc.
   location ~* \.(?:jpg|jpeg|gif|png|webp|ico|cur|gz|svg|mp4|mp3|ogg|ogv|webm|htc)$ {
       expires 1y;
       access_log off;
   }
   

2. Once you are there, proceed to remove the conflicting extensions: jpg, jpeg, gif, and png). The directive should now be:

   # Caches images, icons, video, audio, HTC, etc.
   location ~* \.(?:webp|ico|cur|gz|svg|mp4|mp3|ogg|ogv|webm|htc)$ {
       expires 1y;
       access_log off;
   }
   

3. Save the changes and exit the editor.

4. Restart Nginx:

   sudo service nginx restart
   

Purge Cloudflare cache

It is important to note that if your site is using Cloudflare, you’ll continue to get cached image responses (so you may see broken images or the previously cached .jpg or .png) instead of the WebP image until you clear the cache in Cloudflare.