Coding, Web, Hydrology and more.

Adding Auto WebP Conversion Functionality to Nginx

A

0x00 Introduction

WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

When compared with conventional image format, WebP would be significantly smaller than JPEG and PNG, which are typical representative for lossy and lossless compression image format. Therefore, small image size is the biggest advantage that WebP has, especially when we are in such an era that web page load time matters so much. Nevertheless, because that WebP is a new image format, it has less browser support, for example, browsers like IE11 or older would not support that. So if you don’t care about backward compatibility and you want a flash web page load speed and smaller traffic, I would recommend you to take a look at WebP format.

0x01 Deploy WebP Conversion Server

It would be a nighmare to manually convert your old images to WebP format. So the best practice is to let this job done by your server.

webp_server_go is an open-source project which takes the role of converting images. Thanks to Nginx’s powerful reverse proxy function, you can automatically convert your old images without replacing image url or any manual work.

There are two ways to install webp_server_go, you can use a docker image or download binary file and install it.

1) Install manually

The binary file can be downloaded from: https://github.com/webp-sh/webp_server_go/releases

Presume that you save the binary file to /opt/webp/webp-server, the first thing you should do is export sample configuration by

Now you will have config.json in /opt/webp/, it should look like

Then you can run webp server using following command:

At most time, you would like the server run in the background rather than foreground, so I would recommend you to create a service to keep program background, following code would help you create a service for better management.

2) Install by Docker

The webp_server team has offered a docker image here: [epcl_button label=”Link” url=”https://hub.docker.com/r/webpsh/webps” type=”outline” color=”red” size=”small” icon=”fa-external-link-square” target=”_blank” rel=”nofollow”][/epcl_button]

If you have docker installed on your virtual machine, type in this command to make webp_server work:

p.s. Remember to change /path/to/pics in the command.

Moreover, if you’d like to have better customization ability, I would recommend you to use docker-compose. Following is my configuration to make webp_server run:

p.s. /www/webp_cache is directory where I store webp cache.

0x02 Configuring Nginx

The last thing you need to do is to configure Nginx properly to handover image requests to webp_server. In your vhost configuration file, add this inside server block:

Then reload Nginx config by:

Then you are ready to go, open up any picture that you upload to your server, you would find it that the content-type change to image/webp.

About the author

EDLinus

[stay(d) for d in ('determined','diligent','devoted')]

 
By EDLinus
Coding, Web, Hydrology and more.

Meta