動態轉換圖片格式為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命令
如果你的編輯器不支持點擊圖標來運行，那麼你可以在終端進入項目的根目錄，按照順序執行如下所示的命令：
bash
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 需要處理的圖片格式
```json { "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"] }
```
最後，在終端執行如下所示的命令來啟動轉換程序：
bash
./webpServer --config=config.json
看到如下所示的界面時，就代表此服務已經正常工作了。
注意：大多數情況下你應該是需要此程序靜默運行的，不希望看到這個運行框，那麼你就需要用到
nohup命令來執行程序了。例如：
nohup ./webpServer --config=config.json > /Volumes/DataStorage/logs/webpServer-log.txt &對此命令不熟悉的開發者，請移步Linux nohup 命令作進一步瞭解。
反向代理客户端請求
做完上述配置後，我們就可以配置nginx來攔截客户端的請求，將其反向代理至我們上一步搭建的好服務上，配置如下所示：
- 所有攜帶包含uploads的請求全部交給webpserver進行處理
bash
# 反向代理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格式了
寫在最後
至此，文章就分享完畢了。
我是神奇的程序員，一位前端開發工程師。
如果你對我感興趣，請移步我的個人網站，進一步瞭解。
- 文中如有錯誤，歡迎在評論區指正，如果這篇文章幫到了你，歡迎點贊和關注😊
- 本文首發於神奇的程序員網站，未經許可禁止轉載💌