Solid-State Society

Tag: WebP

  • Proxying and Caching WebP Images Using the Same URI Based on User Accept Headers with Nginx

    Case:

    • The proxied image backend serves WebP images when the client requests support it with Accept headers ($http_accept)
    • The backend also provides the same URI for all WebP requests. That means URI like image.png can also be in WebP format

    The solution:

    • Using Nginx map module
    • Apply variables to different cache pools

    In nginx.conf:

    # Proxy cache pools for image caching
proxy_cache_path        /dev/shm/image_cache
                        keys_zone=image_cache:10m;

proxy_cache_path        /dev/shm/image_cache_webp
                        keys_zone=image_cache_webp:10m;

# Differenate WebP requests
map $http_accept $webp_pool {
  default                 image_cache;
  ~*webp                  image_cache_webp;
}

    In your site config:

    proxy_cache             $webp_pool;