user www-data; | |
http { | |
## | |
# Basic Settings | |
## | |
sendfile on; | |
tcp_nopush on; | |
tcp_nodelay on; | |
# IMPORTANT!!! Make sure that mime.types below lists WebP like that: | |
# image/webp webp; | |
include /etc/nginx/mime.types; | |
default_type application/octet-stream; | |
gzip on; | |
gzip_disable "msie6"; | |
## | |
# Conditional variables | |
## | |
map $http_accept $webp_suffix { | |
default ""; | |
"~*webp" ".webp"; | |
} | |
## | |
# Minimal server | |
## | |
server { | |
listen 80 default_server; | |
listen [::]:80 default_server ipv6only=on; | |
root /usr/share/nginx/html; | |
index index.html; | |
# Make site accessible from http://localhost/ or whatever you like | |
server_name localhost; | |
location ~* ^/images/.+\.(png|jpg)$ { | |
root /home/www-data; | |
add_header Vary Accept; | |
try_files $uri$webp_suffix $uri =404; | |
} | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
The corresponding blog post. |
This comment has been minimized.
This comment has been minimized.
Thanks for both the gist and the blog post. They were really helpful. One note: as far as I can tell, this can be simplified a bit. I did the following:
So now we're just doing a simple string interpolation instead of a map lookup. This is convenient, because all of the relevant configs can now be placed within the It's possible that I'm overlooking something here, but as best as I can tell, this all works OK. |
This comment has been minimized.
This comment has been minimized.
Hi! The problem of your conf is one: You are now, serving webp for 100% of users. webp is only visible (or should be) on Chrome or other more recent browsers. If you try your config on a old browser, the image will show with error... That why the MAP use the variable $http_accept :) |
This comment has been minimized.
This comment has been minimized.
Btw guys, thank you! With the help of: https://serverfault.com/questions/987086/serving-webp-with-nginx-conditionally-for-laravel/987179#987179 I could make it for me better. For example: picture.jpg => picture.webp and not picture.jpg.webp |
This comment has been minimized.
This comment has been minimized.
Since you are using the regex on the rewrite, just look at what's actually is doing. |
This comment has been minimized.
This comment has been minimized.
@Garistar I am not sure your approach is correct as is:
The reason why in my original code I add a suffix instead of manipulating names is actually simple: because I use
with:
I create On top of that my actual code (not the toy one in the example) can serve multiple compressions:
Nowadays I am considering adding avif to the list. That's why a name manipulation is not a priority to me. If it is important it is possible not only update file names but serve files from:
Doing that will help with potential name clashes as well. |
This comment has been minimized.
This sample config is copied from grunt-tight-sprite's Recipe: serve WebP with nginx conditionally.