Add support for WebP format images.

WebP format is a web image encoding format derived from Google vp8 video encoding. It supports both lossy and lossless compression, and lossless compression can be very efficient while maintaining very high image quality.
Wikipedia for WebP

A few days ago, I saw that firefox also started to support WebP format after Chrome, Opera and Edge, Firefox will also support WebP image format.
So the only mainstream browser that doesn’t officially support WebP is Apple’s Safari.
So I would like to convert the image resources I use in my blog to WebP format.


To get the corresponding WebP file, the easiest way is to add the automatic conversion function in the deployment script when the blog is deployed automatically.
first in the server to install the automatic conversion tool, fortunately I use the Linux distribution of the official source there is a corresponding tool.

apt install webp

After installation, you can use cwebp dwebp command to encode and decode WebP files .
such as png images to WebP conversion ``bash’’ cwebp input.png -o output.webp

Set quality, default to 75 if not set

cwebp -q 90 input.png -o output.webp

Then all the images are converted to WebP in the auto-deployment script.
#! /bin/zsh
function read_dir(){
    for file in `ls $1`
        if [ -d $1"/"$file ]
            read_dir $1"/"$file
            cwebp $1"/"$file -o $1"/"$file".webp" &
read_dir $imageDir

Modified content

Now the preparatory work is done, but there is still a little work to be done:

the correct display of WebP images in supported browsers, but also in non-supported browsers can correctly display png/jpg and other conventional image formats.

There are many ways, here we are directly through the HTML code to solve the problem ``html


Now it is possible to display WebP images correctly in Chrome and jpg images in Safari.

At the same time, it saves a lot of traffic when successfully displaying images in WebP format.