WEBP not working on NGINX

the red png image will only turn to a green webp image if these conditions are satisfied:

1. You are using Google Chrome (or another webp supported browser, like Opera)

2. Your server is properly redirecting the .png requests to the .webp variants.

Since you’re using nginx, the “Rules verified successfully” message means nothing. Those rules only work for Apache. While I love nginx, there is no way to verify the nginx rewrite rules, other than that little red/green image. Also, disabling or enabling tools will do nothing to the test image, just to clear away any misconceptions…

I went and reread the original article, and the one thing I can see causing issues is that you have to make sure to specify the location to your wordpress install/folder in the ‘location’ line. Where it says ^/images/…, you need to make sure that is the root of your wordpress install. If you don’t have an images/ folder, it won’t be applicable. You could limit it to just wp-content/ if you like as well. Also note the little carrot symbol (^): this means that the matching is done from the start of the url. So if your website address is https://example.com/, then you would use this line:

location ~* ^/.+\.(png|jpg)$ {

or

location ~* ^/wp-content/.+\.(png|jpg)$ {

However, if your wordpress folder is in a sub-folder like https://example.com/awesome/, it might look more like this:

location ~* ^/awesome/.+\.(png|jpg)$ {

or

location ~* ^/awesome/wp-content/.+\.(png|jpg)$ {

I hope that helps. And of course, make sure you restart nginx after every config file change.

Thanks for the quick help!

I actually had two issues that were preventing this from working. One was as you suspected–I was pointing to /images/ instead of the applicable directory. I also had to remove the line root /home/www-data;.

My setup is quite different from the tutorial’s, and I’m just a casual user and am not well-versed in any of this, but in case it helps others:

1) I edited the mime.types file exactly as the tutorial suggests and added:

image/webp webp;

2) In my nginx.conf file, I included:

map $http_accept $webp_suffix {
default   "";
"~*webp" ".webp";
}

3) In included the last part in etc/nginx/sites-available/default (in my case, …/sites-available/wordpress) within the server block and also adjusted the try_files line. So this is what is working for me:

location ~* ^/wp-content/.+\.(png|jpg)$ {
        add_header Vary Accept;
	    try_files $uri$webp_suffix $uri/ =404;
    }

Also, I dunno if it would have made a difference or not, but before taking the above steps I apt-get install -ed imagemagick and webp to my server.