Skip to content

Instantly share code, notes, and snippets.

Last active May 23, 2023 10:18
  • Star 30 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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;
Copy link

h2kyaw commented Dec 25, 2021

Can I use this without .webp files?

Copy link

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.

Copy link

ddur commented Feb 18, 2022

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


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