前言

webp是谷歌推出的一種圖像格式，它可以在保持同樣質(zhì)量的情況下，體積比JPG少40%，可以很大程度的節(jié)省帶寬使用，提升網(wǎng)站的加載速度。

由于它是新推出不久的格式，對(duì)于一些比較舊的瀏覽器，它是不支持的。那么有沒(méi)有辦法讓支持此格式的瀏覽器加載webp圖片，讓不支持的瀏覽器加載正常圖片呢?

本文就跟大家分享一種解決方案，歡迎各位感興趣的開(kāi)發(fā)者閱讀本文。

思路分析

我們想實(shí)現(xiàn)這個(gè)需求，首先得需要有一個(gè)能將普通的圖片格式轉(zhuǎn)換為webp格式的程序，經(jīng)過(guò)一番尋找后，找到了一個(gè)名為webp_server_go的開(kāi)源項(xiàng)目。

轉(zhuǎn)換程序我們有了，那么如何動(dòng)態(tài)調(diào)用這個(gè)程序呢?我們的需求是根據(jù)客戶端的情況來(lái)決定是否要返回webp格式的圖片，那么我們就可以在nginx中通過(guò)反向代理來(lái)實(shí)現(xiàn)動(dòng)態(tài)調(diào)用。

我們來(lái)梳理下思路：

• nginx攔截客戶端請(qǐng)求，將請(qǐng)求反向代理到webp_server_go
• webp_server_go收到請(qǐng)求后，讀取http_header中的瀏覽器信息，決定是否要返回webp格式的圖片
• 最后，nginx將webp_server_go返回的內(nèi)容發(fā)給瀏覽器

編譯轉(zhuǎn)換程序

webp_server_go的releases頁(yè)面提供了linux的安裝包，如果你的運(yùn)行環(huán)境正好滿足條件，可以跳過(guò)此章節(jié)，直接下載即可。

這個(gè)程序采用go語(yǔ)言編寫(xiě)，因此需要安裝go的開(kāi)發(fā)環(huán)境，由于安裝過(guò)程較為簡(jiǎn)單，本文不做講解。按照教程搭建好環(huán)境后，我們把項(xiàng)目clone到本地，目錄如下所示：

我們打開(kāi)Makefile文件(推薦使用GoLand來(lái)打開(kāi))，執(zhí)行文件里面的default命令：

如果你的編輯器不支持點(diǎn)擊圖標(biāo)來(lái)運(yùn)行，那么你可以在終端進(jìn)入項(xiàng)目的根目錄，按照順序執(zhí)行如下所示的命令：

make clean
go build -o builds/webp-server-$(OS)-$(ARCH) .

執(zhí)行成功后，你會(huì)在builds目錄下看到編譯出來(lái)的適用于你當(dāng)前系統(tǒng)的應(yīng)用程序(如果你的系統(tǒng)是macos，看到的結(jié)果會(huì)和我的一樣，如果是windows看到的則是一個(gè)exe文件)。

運(yùn)行轉(zhuǎn)換程序

按照官網(wǎng)列舉的使用方法，我們?cè)谟脩舻母夸泟?chuàng)建一個(gè)名為webp-server的文件夾，將準(zhǔn)備好的轉(zhuǎn)換程序復(fù)制進(jìn)去并在其目錄下創(chuàng)建一個(gè)名為config.json文件，寫(xiě)入如下所示的內(nèi)容：

• HOST 啟動(dòng)后的服務(wù)地址
• PORT 服務(wù)端口號(hào)
• QUALITY 轉(zhuǎn)換后的圖片質(zhì)量
• MAX_JOB_COUNT 最大并發(fā)轉(zhuǎn)換量
• IMG_PATH 圖片存儲(chǔ)路徑(客戶端訪問(wèn)圖片資源時(shí)的存儲(chǔ)目錄)
• EXHAUST_PATH 轉(zhuǎn)換為webp后的圖片存儲(chǔ)路徑(客戶端請(qǐng)求資源時(shí)會(huì)優(yōu)先從這里找，找不到才會(huì)觸發(fā)轉(zhuǎn)換程序，轉(zhuǎn)換完成后會(huì)存儲(chǔ)到此處)
• 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"]
}

最后，在終端執(zhí)行如下所示的命令來(lái)啟動(dòng)轉(zhuǎn)換程序：

./webpServer --config=config.json

看到如下所示的界面時(shí)，就代表此服務(wù)已經(jīng)正常工作了。

注意：大多數(shù)情況下你應(yīng)該是需要此程序靜默運(yùn)行的，不希望看到這個(gè)運(yùn)行框，那么你就需要用到nohup命令來(lái)執(zhí)行程序了。

例如：

nohup ./webpServer --config=config.json > /Volumes/DataStorage/logs/webpServer-log.txt &

對(duì)此命令不熟悉的開(kāi)發(fā)者，請(qǐng)移步Linux nohup 命令作進(jìn)一步了解。

反向代理客戶端請(qǐng)求

做完上述配置后，我們就可以配置nginx來(lái)攔截客戶端的請(qǐng)求，將其反向代理至我們上一步搭建的好服務(wù)上，配置如下所示：

所有攜帶包含uploads的請(qǐng)求全部交給webpserver進(jìn)行處理：

 # 反向代理uploads目錄下的圖片至webpserver進(jìn)行格式轉(zhuǎn)換
 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;
 }

最后，我們?cè)L問(wèn)網(wǎng)站來(lái)看下是否成功，如下所示：

返回的圖片已經(jīng)是webp格式了：