WebP Server這是一個基于 Golang 的服務器，允許您動態提供 WebP 圖像，在不改變圖片URL路徑的情況下，自動將JPEG、PNG、BMP、GIF等圖像轉換為WebP格式，從而減小圖片體積，降低流量消耗和提高加載速度。

什么是WebP？

WebP是一種同時提供了有損壓縮與無損壓縮（可逆壓縮）的圖片文件格式，由Google推出，WEBP的格式壓縮率非常高，在同質量的情況下.webp格式的圖片體積會小很多。主流的FireFox/Chrome瀏覽器已經支持webp圖像，但目前Safari還不支持。

WebP Server的作用

WebP Server相當于一個旁路的WEB服務器，管理員配置好WebP Server后，可以自動將JPEG、PNG、BMP、GIF等圖像轉換為WebP格式，同時URL地址不會發生改變，對于FireFox/Chrome支持webp圖像的瀏覽器，直接返回webp格式給用戶，對于Safari不支持webp的瀏覽器則輸出原圖，做到用戶無感知訪問。

配置WebP Server

這篇文章我們以WordPress站點為例來實際操作一下，xiaoz的環境如下：

• 操作系統：CentOS 7

• 站點程序：WordPress

• 當前Web服務器：nginx

創建systemd服務

為保持WebP Server后臺運行，使用systemd服務來管理更加方便，這里WebP Server已經為我們提供好了systemd文件，我們直接使用即可。

執行下面的命令生成systemd服務文件

./webp-server -dump-systemd

產生的服務文件內容如下：

[Unit]Description=WebP Server GoDocumentation=https://github.com/webp-sh/webp_server_goAfter=nginx.target[Service]Type=simpleStandardError=journalWorkingDirectory=/opt/webpsExecStart=/opt/webps/webp-server --config /opt/webps/config.jsonRestart=alwaysRestartSec=3s[Install]WantedBy=multi-user.target

這個服務文件直接讀取的/opt/webps/目錄，因此我們需要先創建這個目錄，并將webp-server放到這個目錄下：

#創建目錄mkdir -p /opt/webps/#將webp-server移動到對應目錄mv webp-server /opt/webps/

創建配置文件

新建一個/opt/webps/config.json作為WebP Server的配置文件：

#新建文件vi /opt/webps/config.json

內容如下：

{        "HOST": "127.0.0.1",        "PORT": "3333",        "QUALITY": "80",        "IMG_PATH": "/data/wwwroot/xiaoz.me",        "EXHAUST_PATH": "/data/caches/xiaoz.me",        "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"]
}

各參數含義如下，請根據實際情況修改：

• HOST:監聽IP

• PORT:監聽端口

• QUALITY:優化程度，默認為80

• IMG_PATH:站點圖片存放路徑，一般是站點根目錄

• EXHAUST_PATH:緩存路徑，這個目錄需要自己創建

• ALLOWED_TYPES:哪些圖片后綴需要轉換為webp

運行WebP Server

上面配置完成后，輸入下面的命令來運行WebP Server

#刷新服務systemctl daemon-reload#啟動WebP Serversystemctl start webp-server#開機啟動systemctl enable webp-server

nginx反向代理

在您的站點配置文件中，添加下面的反向代理配置,并重啟Nginx生效。

location ^~ /wp-content/uploads/ {    proxy_set_header Host $http_host;    proxy_pass http://127.0.0.1:3333;
}

對比驗證

使用瀏覽器打開https://cdn.xiaoz.me/wp-content/uploads/2020/02/snipaste_20200220_200213.png查看到圖片大小為109Kb，圖像MIME類型為image/png

再訪問WebP Server的地址進行對比，可以看到圖像被壓縮為了55.3Kb，MIME類型變為了image/webp，壓縮效果非常明顯。

總結

WebP Server可以做到不改變圖片URL路徑的情況下，根據訪客瀏覽器判斷輸出WebP圖像還是原圖，這一點非常方便。但如果網站啟用了CDN后，CDN邊緣節點會將優化過的WebP圖像進行緩存，若訪客使用Safari這類不支持WebP圖像的瀏覽器將導致圖像無法顯示。因此WebP Server不太適合CDN場景，除非您直接考慮放棄Safari用戶。

除此之外，又拍云CDN也支持WebP圖像自適應，從CDN方面著手即可解決WebP Server無法使用CDN的痛點。