I know this thread is 2 years old but I just set this up myself so I will share my solution here.
First edit the /etc/nginx/nginx.conf file and add the following code anywhere inside of the http{} block.
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
You have to edit the /etc/nginx/nginx.conf file directly because this must be in the http{} block, not the server {} block.
Next edit the /etc/nginx/common/locations.conf file.
Add the following block nested inside of the location block that starts with location ~* \.(ogg|ogv|svg....
location ~* ^.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
In the end the nested block should look like this.
location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf|swf|woff2|m4a|c>
include common/headers-http.conf;
include common/headers-https.conf;
add_header "Access-Control-Allow-Origin" "*";
access_log off;
log_not_found off;
expires max;
location ~* ^.+\.(png|jpe?g)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
}
You have to edit the /etc/nginx/locations.conf file directly because there is already a location block in there that will match png/jpg files and you can't match 2 locations blocks.
Keep in mind that both /etc/nginx/nginx.conf and /etc/nginx/locations.conf files could get overwritten in the future if you update Webinoly.
Also, if you are using a CDN you will need to manually invalidate the cache because the http old http response headers without the vary: accept header will be cached.