Rewrite rules for WebP with Nginx

That solution looks perfect, is there a reason it doesn’t work for you?

I did make an attempt. I can see the test image in the plugin admin, but no webp images on the front end (using Chrome).

I’m not an Nginx expert, so I wanted to see if it had been done before and if there was a readily available solution.

This is what I did:

1. Added “image/webp webp” to /etc/nginx/mime.types
2. Added
   `map $http_accept $webp_suffix {
   default “”;
   “~*webp” “.webp”;
   }` to my main /etc/nginx/nginx.conf
3. Added
   ` location ~* ^/wp-content/.+\.(png|jpg)$ {
   # root // commented out;
   add_header Vary Accept;
   try_files $uri$webp_suffix $uri =404;
   }` to the server block for the site.
4. Restarted nginx

The site is https://www.pekoe.se.

If the test image works, then it is working. The urls on the front-end will look like they are the png/jpg images, but they are the webp versions. At least that is how it looks in Apache as well. The test image is the only way I know currently to verify this. There is probably some testing site you can run it through to verify it otherwise.

Yes, you’re right! When I inspect the image in Chrome dev tools I see a MIME type of image/webp, while in Firefox it’s image/jpeg (and more than double the file size).

Thanks for quick help and a great plugin!

Hello.

I had the same issue, and solved with the following code:

location ~* ^/.+\.(png|jpg|jpeg)$ {
  set $red Z;

  if ($http_accept ~* "webp")    {
    set $red A;
  }
  if (-f $request_filename.webp) {
    set $red "${red}B";
  }

  if ($red = "AB") {
      add_header Vary Accept;
      rewrite (.*) $1.webp redirect;
  }
}

Instead of rewriting the image (what causes issues with my cache configuration) I made my choice for a redirect. If visitor’s browser supports webp, and an image .webp with the same name exists, then the redirection occurs.

If you can read in Portuguese, in my blog I explain the hack I had to use in order to make multiple conditionals on Nginx.

https://janio.sarmento.org/hackeando-o-nginx-condicionais-multiplas.html