動態轉換圖片格式為Webp
前言
webp是谷歌推出的一種圖像格式，它可以在保持同樣質量的情況下，體積比JPG少40%，可以很大程度的節省帶寬使用，提升網站的加載速度。
由于它是新推出不久的格式，對于一些比較舊的瀏覽器，它是不支持的。那么有沒有辦法讓支持此格式的瀏覽器加載webp圖片，讓不支持的瀏覽器加載正常圖片呢?
本文就跟大家分享一種解決方案，歡迎各位感興趣的開發者閱讀本文。
思路分析
我們想實現這個需求，首先得需要有一個能將普通的圖片格式轉換為webp格式的程序，經過一番尋找后，找到了一個名為webp_server_go的開源項目。
轉換程序我們有了，那么如何動態調用這個程序呢?我們的需求是根據客戶端的情況來決定是否要返回webp格式的圖片，那么我們就可以在nginx中通過反向代理來實現動態調用。
我們來梳理下思路：
- nginx攔截客戶端請求，將請求反向代理到webp_server_go
- webp_server_go收到請求后，讀取http_header中的瀏覽器信息，決定是否要返回webp格式的圖片
- 最后，nginx將webp_server_go返回的內容發給瀏覽器
編譯轉換程序
webp_server_go的releases頁面提供了linux的安裝包，如果你的運行環境正好滿足條件，可以跳過此章節，直接下載即可。
這個程序采用go語言編寫，因此需要安裝go的開發環境，由于安裝過程較為簡單，本文不做講解。按照教程搭建好環境后，我們把項目clone到本地，目錄如下所示：
我們打開Makefile文件(推薦使用GoLand來打開)，執行文件里面的default命令：
如果你的編輯器不支持點擊圖標來運行，那么你可以在終端進入項目的根目錄，按照順序執行如下所示的命令：
make clean
go build -o builds/webp-server-$(OS)-$(ARCH) .
執行成功后，你會在builds目錄下看到編譯出來的適用于你當前系統的應用程序(如果你的系統是macos，看到的結果會和我的一樣，如果是windows看到的則是一個exe文件)。
運行轉換程序
按照官網列舉的使用方法，我們在用戶的根目錄創建一個名為webp-server的文件夾，將準備好的轉換程序復制進去并在其目錄下創建一個名為config.json文件，寫入如下所示的內容：
- HOST 啟動后的服務地址
- PORT 服務端口號
- QUALITY 轉換后的圖片質量
- MAX_JOB_COUNT 最大并發轉換量
- IMG_PATH 圖片存儲路徑(客戶端訪問圖片資源時的存儲目錄)
- EXHAUST_PATH 轉換為webp后的圖片存儲路徑(客戶端請求資源時會優先從這里找，找不到才會觸發轉換程序，轉換完成后會存儲到此處)
- ALLOWED_TYPES 需要處理的圖片格式
{
"HOST": "127.0.0.1",
"PORT": "8082",
"QUALITY": "80",
"MAX_JOB_COUNT": "10",
"IMG_PATH": "/Volumes/DataStorage/fileStorage",
"EXHAUST_PATH": "/Volumes/DataStorage/fileStorage/uploads/cache",
"ALLOWED_TYPES": ["jpg", "png", "jpeg", "bmp"]
}最后，在終端執行如下所示的命令來啟動轉換程序：
./webpServer --config=config.json
看到如下所示的界面時，就代表此服務已經正常工作了。
注意：大多數情況下你應該是需要此程序靜默運行的，不希望看到這個運行框，那么你就需要用到nohup命令來執行程序了。
例如：
nohup ./webpServer --config=config.json > /Volumes/DataStorage/logs/webpServer-log.txt &
對此命令不熟悉的開發者，請移步Linux nohup 命令作進一步了解。
反向代理客戶端請求
做完上述配置后，我們就可以配置nginx來攔截客戶端的請求，將其反向代理至我們上一步搭建的好服務上，配置如下所示：
所有攜帶包含uploads的請求全部交給webpserver進行處理：
# 反向代理uploads目錄下的圖片至webpserver進行格式轉換
location ~ ^/(uploads)/ {
proxy_pass http://127.0.0.1:8082;
proxy_set_header X-Real-IP $remote_addr;
proxy_hide_header X-Powered-By;
proxy_set_header HOST $http_host;
}
最后，我們訪問網站來看下是否成功，如下所示：
返回的圖片已經是webp格式了：
