讓圖片飛一會兒！網站圖片WebP格式批次轉換設定及加速效果體驗

由於部落格主機是放在國外，雖然說用上了經典的CN2 GIA，速度比放在普通的美國機房的VPS主機快了不少，但是由於寫文章需要插入大量的圖片，且Wordpress安裝了眾多的外掛程式（請參閱：挖站否Wordpress外掛程式匯總），導致瀏覽器存取頁面的請求數量非常多。

如果是在國內的VPS，例如像騰訊雲、阿里雲等，天生已經具備了速度優勢，所以只經願意花錢把主機的頻寬加大，國內訪問的速度還是有保障的。而國外的VPS主機機房頻寬給得非常大，但是在晚上上網高峰期間容易線路出現擁堵，可能會影響網站體驗。

所以，如果你像挖站否這樣主機放在國外同時網頁圖片、JS、CSS等文件特別多，就應該盡量去優化，例如減少請求、壓縮圖片、合併JS和CSS、壓縮html頁等。這篇文章主要是來分享圖片優化的經驗：網站webp圖片格式設定及加速效果體驗。

更多關於網站優化的經驗與技巧，請查看：

1. 部落格主要應用技術及支援特性-挖站否網站與伺服器最佳化方法總結
2. DirectAdmin空間啟用OpCache和redis快取加速-WP啟用redis快取
3. Cloudflare自動封鎖惡意IP到防火牆和自動切換5秒盾腳本防CC攻擊

PS：2019年9月3日更新，WebP格式適用於圖片網站和相冊，這裡有兩個適合個人搭建圖床相簿的程序：ImgURL Pro和Chevereto。

PS：2019年9月29日更新，Google開發的Nginx PageSpeed元件可以實現自動轉換webP和自動適應瀏覽器請求等一整套圖片優化，參考：PageSpeed伺服器優化神器-Nginx部署ngx_pagespeed模組和加速效果體驗。

一、WebP圖片優勢與不足？

1.1  最大限度地壓縮圖片

如果圖片在JPEG、PNG以及GIF這些格式的圖片已經沒有太大的優化空間，使用無損壓縮後的WebP比PNG檔案少了26％的體積，有損壓縮後的WebP圖片相比於等效質量指標的JPEG圖片減少了25％~34%的體積。

從下圖我們可以看到webp有損可以將40多kb的PNG壓縮到10kb以下，也保證了圖片的品質──肉眼無法區分。 PNG和Webp在瀏覽器的加速效果詳見：https://isparta.github.io/compare-webp/index.html。 （點擊放大 ）

WebP也支援gif圖片轉換，換句放說webp格式的動圖體積會更小，比較：https://isparta.github.io/compare-webp/index_a.html#12，如下圖：

1.2  個別老舊瀏覽器不相容

webp圖片最大的不足就是一些老舊的瀏覽器不支持，比如IE各個版本、IOS Safari等，不過不用擔心，webp格式圖片在未來被各大瀏覽器支持是一個大趨勢，webp瀏覽器兼容詳見：https://caniuse.com/#search=webp（點選放大）

PS：2019年9月16日更新，我們可以利用PHP代碼和Nginx重寫規則讓伺服器根據客戶瀏覽器決定是否展示webP圖片：網站啟用WebP格式圖片-PHP和Nginx轉換WebP格式和自適應瀏覽器。

二、本地轉換webp

PS：2020年2月6日更新，大量給圖片和視訊轉換格式的軟體還可以試試開源免費的FFmpeg：免費開源的視訊音訊格式轉換和壓縮軟體FFmpeg-快速轉換格式和壓縮視頻。

最方便讓網站用上webp格式圖片，不是在本地生成，而是直接在線上將gif、png、JPG等格式的圖片轉換為webp格式圖片。這類的網站有：

1. HTTPS://Web P-converter.com/
2. HTTPS://EZ gif.com/jpg-to-Web P
3. HTTPS://嗚嗚嗚.A convert.com/才能/image/
4. HTTPS://製圖.I蘇X.US/

線上轉換webp圖片適合小量的圖片，如果你有大量的圖片轉換為webp格式的需要，可以下載webp格式轉換軟體，例如：XnConvert、iSparta等，直接在電腦上就可以批量轉換圖片為webp格式了。

1. HTTP://I Sparta.GitHub.IO/
2. HTTPS://嗚嗚嗚.新年view.com/恩/新年convert/

三、Linux轉換webp

3.1  Webp工具安裝

Webp各大版本：

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

WebP安裝快速安裝指令：

#debian install webp
sudo apt-get install webp

WebP原始碼編譯安裝指令：

# 安装编译器以及依赖包
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

驗證webp是否安裝成功。在終端機輸入cwebp，顯示以下輸出，說明已經安裝成功：

[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.

安裝成功後，主要有以下幾個命令工具：

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  指令用法

JPG 、PNG -> WebP

使用 cwebp 將 JPG和PNG圖片轉換為webp格式。

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

使用 imagemagick 將 png 轉換為 jpg.

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

你還可以設定壓縮質量比例，以及方式等：

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

3.3  批次轉換Webp

利用find指令將指定目錄下的所有jpg和png圖片轉換為webp格式圖片，指令如下：

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"' _ {} ;

自動批次轉換Webp圖片。 這裡就需要用到Linux的定時任務了，不會用的定時任務的可以先學習一下：Linux Crontab指令定時任務基本語法與操作教學。建立檔案：webp2jpg.sh，然後貼上以下程式碼：

# 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

確保shell檔案有執行權限，然後就可以執行webp2jpg.sh 來轉換圖片了。

四、CDN啟用webp

4.1  又拍雲啟用Webp

沒有用過又拍雲CDN的，可以參考：又拍雲CDN一鍵鏡像,靜態動態CDN和免費SSL。又拍雲端啟用webp很簡單，直接開啟webp自適應即可，當瀏覽器支援webp格式的圖片時，又拍雲WebP會自動回到webp格式，非常好。 （點擊放大）

4.2  百度雲CDN啟用Webp

百度雲沒有自適應webp功能，你需要利用圖片處理的方式實作。圖片後面加上：@f_webp就可以直接轉移為webp格式瀏覽了。例如：。

百度雲CDN Webp效果如下：

WordPress webp外掛WebP Express支援多種圖片轉換方式，例如可以呼叫本地VPS上的: cwebp, gd, imagick來轉換，也可以使用在線Webp轉換服務的API來實現圖片轉換。

六、總結

網站圖片webp格式最大的好處是極大的壓縮了圖片的體積，尤其是網頁中含有大量的圖片，加速訪問的效果會非常明顯。另外，對於大型網站來說，啟用Webp格式的圖片會節省流量成本。

網站圖片webp格式不好的地方就是老的瀏覽器不支持，另外webp格式的圖片瀏覽軟體支援不全，有些同學可能會將webp圖片下載到本地，發現常用的看圖可能會打開，這都是網站設計者需要考慮的事情。