Let the pictures fly for a while! Website image WebP format batch conversion settings and accelerated effect experience

Since the blog host is located abroad, although the classic CN2 GIA is used, the speed is much faster than that of a VPS host placed in an ordinary American computer room. However, writing articles requires inserting a large number of pictures, and WordPress has installed many Plug-ins (see: Summary of Wordpress plug-ins for digging websites) cause the browser to make a very large number of requests to access the page.

If it is a domestic VPS, such as Tencent Cloud, Alibaba Cloud, etc., it already has a speed advantage, so as long as you are willing to spend money to increase the bandwidth of the host, the speed of domestic access is still guaranteed. Foreign VPS host computer rooms provide very large bandwidth, but lines are prone to congestion during peak Internet hours at night, which may affect the website experience.

Therefore, if your host is placed abroad like Dizhanfou and there are a lot of webpage images, JS, CSS and other files, you should try to optimize it, such as reducing requests, compressing images, merging JS and CSS, compressing html pages, etc. This article is mainly to share the experience of image optimization: website webp image format setting and acceleration effect experience.

For more experience and tips on website optimization, please check out:

1. Main application technologies and supporting features of blogs - summary of website and server optimization methods
2. DirectAdmin space enables OpCache and redis cache acceleration - WP enables redis cache
3. Cloudflare automatically blocks malicious IPs to the firewall and automatically switches to a 5-second shield script to prevent CC attacks

PS: Updated on September 3, 2019, the WebP format is suitable for picture websites and photo albums. Here are two programs suitable for individuals to build photo albums: ImgURL Pro and Chevereto.

PS: Updated on September 29, 2019, The Nginx PageSpeed ​​component developed by Google can realize a complete set of image optimization such as automatically converting webP and automatically adapting to browser requests. Reference: PageSpeed ​​server optimization artifact-Nginx deploys ngx_pagespeed module and accelerated effect experience.

1. What are the advantages and disadvantages of WebP images?

1.1  Maximize image compression

If there is not much room for optimization of images in JPEG, PNG and GIF formats, WebP images after lossless compression are 26% smaller than PNG files. WebP images after lossy compression are compared with equivalent quality indicators. The size of JPEG images is reduced by 25% to 34%.

From the picture below, we can see that webp lossy can compress a PNG of more than 40 kb to less than 10 kb, and ensures the quality of the image - it is indistinguishable to the naked eye. For details on the browser acceleration effects of PNG and Webp, please see: https://isparta.github.io/compare-webp/index.html. (Click to enlarge )

WebP also supports GIF image conversion. In other words, the size of animated images in webp format will be smaller. Comparison: https://isparta.github.io/compare-webp/index_a.html#12, as shown below:

1.2  Some old browsers are not compatible

The biggest shortcoming of webp images is that some old browsers do not support it, such as various versions of IE, IOS Safari, etc. But don’t worry, it is a major trend for webp format images to be supported by major browsers in the future. For details on webp browser compatibility, : https://caniuse.com/#search=webp (click to enlarge)

PS: Updated on September 16, 2019, We can use PHP code and Nginx rewrite rules to let the server decide whether to display webP images based on the client's browser: the website enables WebP format images - PHP and Nginx convert WebP formats and adaptive browsers.

2. Convert webp locally

PS: Updated on February 6, 2020, For software that converts images and videos in batches, you can also try the open source and free FFmpeg: free and open source video and audio format conversion and compression software FFmpeg-quick format conversion and Compress video.

The most convenient way for a website to use webp format images is not to generate them locally, but to directly convert images in gif, png, JPG and other formats into webp format images online. Such websites include:

1. HTTPS://Web P-converter.com/
2. HTTPS://EZ gif.com/jpg-to-Web P
3. HTTPS://wuwuwu.A convert.com/ talent /image/
4. HTTPS:// cartography.IsuX.US/

Online conversion of webp images is suitable for small amounts of images. If you need to convert a large number of images to webp format, you can download webp format conversion software, such as: XnConvert, iSparta, etc., and you can batch convert images to webp format directly on your computer. .

1. HTTP://I Sparta.GitHub.IO/
2. HTTPS://wuwuwu.New Yearview.com/En/New Yearconvert/

3. Linux conversion to webp

3.1  Webp tool installation

Webp major versions:

1. HTTPS://storage.Google APIs.com/downloads.Webcom project.org/releases/Web P/index.HTML

WebP installation quick installation command:

#debian install webp
sudo apt-get install webp

WebP source code compilation and installation commands:

# 安装编译器以及依赖包
yum install -y gcc make autoconf automake libtool libjpeg-devel libpng-devel
# 请到官网下载最新版本
wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-0.6.0.tar.gz
# 解压
tar -zxvf libwebp-0.6.0.tar.gz
# 进入目录
cd libwebp-0.6.0
# 源代码安装环境检查
./configure
# 编译
make
# 安装
make install

Verify that webp is installed successfully. Enter cwebp in the terminal, and the following output is displayed, indicating that the installation has been successful:

[root@linux-server]# cwebp
Usage:

   cwebp [options] -q quality input.png -o output.webp

where quality is between 0 (poor) to 100 (very good).
Typical value is around 80.

Try -longhelp for an exhaustive list of advanced options.

After successful installation, there are mainly the following command tools:

cwebp → WebP encoder tool

dwebp → WebP decoder tool

vwebp → WebP file viewer

webpmux → WebP muxing tool

gif2webp → Tool for converting GIF images to WebP

3.2  Command Usage

JPG, PNG -> WebP

Use cwebp to convert JPG and PNG images to webp format.

cwebp filename -o filename
cwebp -q 50 /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg -o /wzfou.com/wp-content/uploads/2019/07/da-wenti_06.jpg.webp

Use imagemagick to convert png to jpg.

# convert from png to jpg by imagemagic
convert wzfou.com.png wzfou.com.jpg

You can also set the compression quality ratio, method, etc.:

convert recaptcha_11.png -quality 50 -define webp:lossless=false,method=6,auto-filter=true,partitions=3 recaptcha_11.webp

3.3  Convert Webp in batches

Use the find command to convert all jpg and png images in the specified directory into webp format images. The command is as follows:

find ./ -name "*.jpg" -exec cwebp -q 50 {} -o {}.webp ; 
find ./ -name "*.png" -exec cwebp -q 50 {} -o {}.webp ; 
#或者
find . -name "*.png" | parallel -eta cwebp {} -o {.}.webp
find ./ -type f -name '*.png' | xargs -P 8 -I {} sh -c 'cwebp -q 75 $1 -o "${1%.png}.webp"' _ {} ;

Automatically convert Webp images in batches. Here you need to use Linux scheduled tasks. If you don’t know how to use scheduled tasks, you can first learn: Linux Crontab command scheduled task basic syntax and operation tutorial. Create the file: webp2jpg.sh, and paste the following code:

# webp2jpg.sh

#!/bin/bash
for file in `ls`
do
  len=`xxd -p -l 4 $file`

  if [ $len == "52494646" ]; then
    echo "$file is webp"
    if [ ! -e $file.jpg ]; then
      echo "===== convert $file ====="
      dwebp $file -o $file.png
      convert "$file.png" "$file.jpg"
      rm $file.png
    fi
  fi
done

Make sure the shell file has execution permission, and then you can execute webp2jpg.sh to convert the image.

4. CDN enables webp

4.1  Activate Webp again on Cloud

If you have not used Youpaiyun CDN, you can refer to: Youpaiyun CDN one-click mirroring, static dynamic CDN and free SSL. Enabling webp in Youpaiyun is very simple. Just turn on webp adaptive. When the browser supports images in webp format, Youpaiyun WebP will automatically return to webp format, which is very good. (Click to enlarge)

4.2  Baidu Cloud CDN enables Webp

Baidu Cloud does not have adaptive webp function, you need to use image processing to achieve it. Add: @f_webp after the picture to directly convert it to webp format for browsing. For example: .

The effect of Baidu Cloud CDN Webp is as follows:

The WordPress webp plug-in WebP Express supports a variety of image conversion methods. For example, you can call: cwebp, gd, imagick on the local VPS to convert, or you can use online Webp conversion service API to implement image conversion.

6. Summary

The biggest advantage of the webp format for website images is that it greatly compresses the size of the images. Especially if the web page contains a large number of images, the effect of accelerating access will be very obvious. In addition, for large websites, enabling images in Webp format will save traffic costs.

The bad thing about the webp format of website images is that old browsers do not support it. In addition, the webp format image browsing software does not fully support it. Some students may download webp images locally and find that commonly used images may be opened. These are all websites Something for designers to consider.