How to configure Nginx to serve webp images

Hi. I have webp images and I also have jpeg/png of same file in the same folder. I have made the following changes to nginx in other to serve webp images

I put this inside of the http {} section block

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

I have this included in the mime.types

image/webp	webp;

and this on my server block

location ~* ^.+\.(png|jpe?g)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

But yet nginx still serves jpeg image instead. What am I not doing right? Please help. Website: 9jawaves.com