I am trying to server webp images to supporting browsers by using the code below. I have already .webp images in addition to .png and .jpg images of the same file.
For example if have an image named vacation.jpg, i also have vacation.jpg.webp.
The code below works but it was overwriting my other location blocks before i switched to a CDN. Now i am using CDN that code block has no effect, no WEBP images in response and also not overwriting my other location blocks.
Here is how to do it:
Add to the /etc/nginx/mime.types
“image/webp webp”
Add to the main nginx.conf file:
map $http_accept $webp_suffix {
default “”;
“~*webp” “.webp”;
}
Add to the server block:
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
Restart or reload nginx.
Example of my other location blocks:
Disable Hot-Linking
location ~ .(ico|gif|png|jpe?g|svg|webp)$ {
valid_referers none blocked example.com *.example.com;
if ($invalid_referer) {
return 403;
}
}
Allow Cross-Origin For Static Domain Files
location ~ \.(ico|gif|png|jpe?|svg|webp|eot|otf|ttf|ttc|woff|woff2|ogg|js|css|font.css)$ {
add_header Access-Control-Allow-Origin "*";
#gzip_vary on;
expires 30d;
}