Serving WEBP with nginx conditionally.

nginx-webp-sample.conf

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 sample config is copied from grunt-tight-sprite's Recipe: serve WebP with nginx conditionally.

This sample config is copied from grunt-tight-sprite's Recipe: serve WebP with nginx conditionally.

The corresponding blog post.

The corresponding blog post.