Skip to content

Instantly share code, notes, and snippets.

@uhop
Last active May 25, 2024 17:02
Show Gist options
  • Save uhop/9177153 to your computer and use it in GitHub Desktop.
Save uhop/9177153 to your computer and use it in GitHub Desktop.
Serving WEBP with nginx conditionally.
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;
}
}
}
@uhop
Copy link
Author

uhop commented Jan 19, 2021

@Garistar I am not sure your approach is correct as is:

  • I am advocating against using rewrite. See the referenced blog post.
  • The gist has no rewrites.
  • Your rewrite expression will be triggered on files like nopng, because it misses a dot in it. And it has some other minor problems.
    • But I do understand your point.

The reason why in my original code I add a suffix instead of manipulating names is actually simple: because I use webp for png and jpg removing the original extensions opens up for a potential name clash. Compare:

  • image.pngimage.png.webp
  • image.jpgimage.jpg.webp

with:

  • image.pngimage.webp
  • image.jpgimage.webp

I create .webp files statically using a utility, I don't want to deal with possible overwrites.

On top of that my actual code (not the toy one in the example) can serve multiple compressions:

  • brotli, zopfli, and gzip for text files + original uncompressed files, if the precompressed versions are missing
  • webp, zopflipng, and png for png-style images
  • webp, guetzli, and jpg for jpg-style images

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:

  • Different folders.
  • Different domains (e.g., different AWS buckets).

Doing that will help with potential name clashes as well.

@ddur
Copy link

ddur commented Aug 30, 2021

@uhop
I create .webp files statically using a utility, I don't want to deal with possible overwrites.

If you serving a WordPress site, you may use Warp iMagick plugin with your nginx configuration.

@h2kyaw
Copy link

h2kyaw commented Dec 25, 2021

Can I use this without .webp files?

@uhop
Copy link
Author

uhop commented Dec 25, 2021

@h2kyaw You can. See the comments above explaining my approach. But you can obviously update the recipe to suit your needs.

@ddur
Copy link

ddur commented Feb 18, 2022

BTW, WordOps Control Panel for Nginx Server and WordPress Sites is already configured for WebP and AVIF.

@pmochine

For example: picture.jpg => picture.webp and not picture.jpg.webp

Imagine uploading picture.jpg and picture.png into same directory. What would happen?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment