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 (https://blog-assets.nova.moe) 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.jpgbut 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:
