Introducing a simple WebP Server

In the previous article I’ve introduced Nginx + mod_pagespeed, which is a great tool that allows us to convert JPGs and PNGs to WebP on the fly, the converted files can be delivered by rewriting the related HTML Code.

Given the scenario I host all my images on a dedicated server () with Nginx for static files server, mod_pagespeed cannot perform the on-the-fly conversion at this time.

So I’ve decided to create a simple server that can convert all JPG/PNG files to WebP format without changing the URLs.

Means you can still access images with /xxx.jpg but the image is in WebP format and the file size of it is smaller.

With some self-learning, there is a prototype available on GitHub: n0vad3v/webp_server written with Node, ExpressJS and cwebp, and the effect of it is quite fascinating, as below.

Requests before and after WebP server

On a typical post with a lot of images such as 《那些年我开过的车（们）》, the images are always large.

With the WebP Server, the requests are becoming much more friendly (Look at eado.pov, it’s original size is 1.4M and the WebP image size is only 476K, wow!).

PageSpeed Insights

The image sizes are a big minus on score, so we just focus on the relative of those.

Before WebP Server:

After WebP Server:

Benchmarks

In my test under a Laptop with i5-7200U(2C4T), Using ab can have the result as below, the request is for a cached webp file.

Document Path:          /moon.jpg
Document Length:        3081336 bytes

Concurrency Level:      1000
Time taken for tests:   33.420 seconds
Complete requests:      10000
Failed requests:        0
Total transferred:      30816170000 bytes
HTML transferred:       30813360000 bytes
Requests per second:    299.22 [#/sec] (mean)
Time per request:       3342.003 [ms] (mean)
Time per request:       3.342 [ms] (mean, across all concurrent requests)
Transfer rate:          900475.41 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0  113 316.6      3    1073
Processing:   613 3167 484.1   3281    4301
Waiting:        2  311 115.7    305    1178
Total:        613 3279 627.3   3289    5367