How to Serve WebP Images on Nginx

How to Serve WebP Images on Nginx

by admin

After the images are optimized, they are served as webp on Apache servers automatically. However, this situation is not possible on nginx servers, so it is necessary to set it manually.

By default the config file is /etc/nginx/nginx.conf and thanks to the include /etc/nginx/conf.d/*.conf; line in this config file, all files in the /etc/nginx/conf.d folder are included.

You need to create a file called webp.conf in the /etc/nginx/conf.d/ directory and paste the code below.

map $http_accept $webp_suffix{
    default "";
    "~*webp" ".webp";
}

Finally, you need to find the config file of the site. Since the path of the config file may change depending on the control panel, we cannot say the config file path. After you find the config file, you can paste the code below inside of the server{} section.

If the browser caching rules exists in the config file, the webp rules must be added before the browser caching rule because the browser caching rule prevents the webp rules from working.

# WebP
location ~* ^/.+\.(png|gif|jpe?g)$ {
    # BEGIN Browser Caching of WebP
    expires 180d; 
    add_header Pragma "public";
    add_header Cache-Control "public";
    # END Browser Caching of WebP

    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

# Browser Caching
location ~* \.(css|js|ico|gif|jpeg|jpg|webp|png|svg|eot|otf|woff|woff2|ttf|ogg)$ {
    expires 180d; 
    add_header Pragma "public";
    add_header Cache-Control "public";
}

Related articles

How is an image served as WebP?
How is an image served as WebP?

WebP is an image format developed by Google. The premium version of WP Fastest Cache optimizes the images as well…

Placeholder Image
htaccess Gzip doesn’t work

Sometimes the files are not compressed although the gzip option has already been enabled.

WP Fastest Cache Cloudflare
WP Fastest Cache Cloudflare

WP Fastest Cache is totally compatible with Cloudflare. In order to minimize potential conflicts, you need to Cloudflare cdn integration.