How to Serve WebP Images on Nginx

In this short tutorial, you’ll learn why and how to serve your websites images in WebP on Nginx. By doing this, your web pages will load faster thanks to a reduction in the network payload.

Why Serve Images in WebP Format?

For those unfamiliar, WebP is a modern image format developed by Google, sometimes referred to as a next-gen format. According to Google, some WebP images are 26% smaller than PNGs and 25-34% smaller than JPEGs. As you know, smaller images being sent over the internet results in faster loading pages.

Depending on how many and how big the images are on a web page, converting your images to WebP can result in a significant decrease in page load time.

Note that the client web browser must support WebP. At this time, it seems like only Chrome and Opera have WebP support. Don’t worry though, Nginx will fallback and serve images in their original format if the browser doesn’t support WebP.

A lot of times, when running a test on PageSpeed Insights, Google suggests to “Serve images in next-gen formats”. Similarly, they explain:

Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG which means faster downloads and less data consumption.

By enabling serving your images in WebP format, you can fix this PageSpeed Insights error on WordPress and non-WordPress websites alike.

Enable WebP Images in Nginx

To serve WebP images in Nginx, you will need root access to your server. On your server you want to edit your website’s configuration file at /etc/nginx/conf.d/something.conf and add the following.

# serve png, jpg, jpeg as webp if available
location ~* ^.+\.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

Next, create a file called webp.conf in the same directory and paste in the following.

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

As long as your default nginx.conf file which is usually located at /etc/nginx/nginx.conf has a line similar to include /etc/nginx/conf.d/*.conf which includes all configuration files in the conf.d directory, everything should work. Otherwise, you’ll have adjust based on your server configuration.

After making changes, restart your Nginx server with the systemctl restart nginx command.

Convert Images to WebP Format

While this tutorial explains how to enable Nginx to serve WebP images, you must manually convert the images to WebP format.

If using WordPress, you can automatically batch convert all of your images to WebP format with the free EWWW Image Optimizer plugin. This plugin is one of the five WordPress plugins I recommend to optimize your site speed.

Otherwise, you can download the WebP converter for Mac, Linux, and Windows from Google.

Verify It’s Working

You can verify that images are served in WebP format with Chrome DevTools. In Google Chrome, go to View -> Developer -> Developer Tools. Open the Network tab and load a page from your website.

Next to each image, you should see a value webp under the Type column..

Did you know another way to speed up your web pages it to enable gzip compression on Nginx?

If you have any questions about WebP images on Nginx, let me know in the comments below.