Serving WebP from Apache and Nginx

Apache and Nginx can serve a pre-generated .webp file in place of a JPEG or PNG when the browser supports it. Both detect support by reading the request's Accept header, rewrite to the matching .webp file if one exists, and set Vary: Accept so caches store the right variant per browser. This guide gives complete, working configuration for each.

This pattern assumes you have already created .webp versions of your images — convert them with JPG to WebP and PNG to WebP. For the format, see What is WebP?.

How does server-side WebP delivery work?

The server checks the request's Accept header for image/webp, then serves a matching .webp file if one exists beside the requested image. A request for photo.jpg returns photo.webp to supporting browsers and the original JPEG to others, all at the same URL.

This requires two .webp files to exist alongside each original. The server rewrites transparently; the HTML keeps referencing the .jpg or .png URL.

How do you serve WebP in Nginx?

Use a map to set a variable from the Accept header, then try_files to serve the .webp variant when it exists. Add the image/webp MIME type and a Vary: Accept header so caches differentiate by browser support.

# In the http block
map $http_accept $webp_suffix {
    default          "";
    "~*image/webp"   ".webp";
}

# In the server block
location ~* ^/.+\.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files ${request_uri}${webp_suffix} $uri =404;
}

The try_files directive first attempts photo.jpg.webp-style paths; adjust the naming to match how your .webp files are stored. Confirm image/webp webp; is present in mime.types.

How do you serve WebP in Apache?

Use mod_rewrite in .htaccess to detect image/webp in the Accept header and rewrite to an existing .webp file. Declare the MIME type with AddType and send Vary: Accept for correct caching.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

The RewriteCond ... -f check ensures Apache rewrites only when the .webp file actually exists, so images without a WebP version still serve normally.

Why is the Vary: Accept header required?

The Vary: Accept header tells caches that the response depends on the request's Accept header. Without it, a CDN or browser cache may store the WebP version and serve it to a browser that cannot decode WebP, or cache the JPEG and serve it to WebP-capable browsers, wasting the optimisation.

Vary: Accept is mandatory for any Accept-based negotiation. The same rule applies to CDNs — see WebP and Content Delivery Networks: Format Negotiation via Accept Headers.

How do you generate the .webp files to serve?

Generate .webp versions of each image ahead of time, since this server pattern serves pre-existing files rather than converting on the fly. Batch-convert your image directory, keeping the originals for fallback, and place each .webp beside its source.

Convert images with WEBPery's browser-based tools — JPG to WebP, PNG to WebP — or a build-time pipeline. For the encoding choices, see WebP Compression Settings.

When should you use a CDN instead of server config?

Use a CDN when you want conversion handled automatically without maintaining .webp files yourself. A CDN such as Cloudflare converts on the fly and caches the result, removing the need for the rewrite rules above. Server config suits self-hosted sites that pre-generate variants.

Compare the approaches in How to Enable WebP on Cloudflare Using Polish and WebP and Content Delivery Networks.

Where to go from here

Apache and Nginx both serve WebP through Accept-header detection and a rewrite to a pre-built .webp file. The one rule you cannot skip is Vary: Accept, which keeps caches honest.