WebP Server在不改變URL的情況下將網(wǎng)站圖像轉(zhuǎn)換為WebP

wordpress 2024-04-27編輯：深圳網(wǎng)站建設(shè)閱讀（） WordPress 轉(zhuǎn)換為 不改變

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

什么是WebP？

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

WebP Server的作用

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

配置WebP Server

這篇文章我們以WordPress站點(diǎn)為例來實(shí)際操作一下，xiaoz的環(huán)境如下：

• 操作系統(tǒng)：CentOS 7
• 站點(diǎn)程序：WordPress
• 當(dāng)前Web服務(wù)器：nginx

下載WebP Server

作者已經(jīng)提供編譯好的二進(jìn)制版本，可以前往：https://github.com/webp-sh/webp_server_go/releases進(jìn)行下載，下方的命令可能隨著時(shí)間推移不是最新版本。

#下載WebP Server
wget -O webp-server https://github.com/webp-sh/webp_server_go/releases/download/0.1.2/webp-server-linux-amd64
#添加執(zhí)行權(quán)限
chmod +x webp-server

創(chuàng)建systemd服務(wù)

為保持WebP Server后臺(tái)運(yùn)行，使用systemd服務(wù)來管理更加方便，systemd的實(shí)踐可以參考我之前的文章《Linux系統(tǒng)編寫Systemd Service實(shí)踐》，不過這里WebP Server已經(jīng)為我們提供好了systemd文件，我們直接使用即可。

執(zhí)行下面的命令生成systemd服務(wù)文件

./webp-server -dump-systemd

產(chǎn)生的服務(wù)文件內(nèi)容如下：

[Unit]
Description=WebP Server Go
Documentation=https://github.com/webp-sh/webp_server_go
After=nginx.target

[Service]
Type=simple
StandardError=journal
WorkingDirectory=/opt/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
Restart=always
RestartSec=3s

[Install]
WantedBy=multi-user.target

這個(gè)服務(wù)文件直接讀取的/opt/webps/目錄，因此我們需要先創(chuàng)建這個(gè)目錄，并將webp-server放到這個(gè)目錄下：

#創(chuàng)建目錄
mkdir -p /opt/webps/
#將webp-server移動(dòng)到對(duì)應(yīng)目錄
mv webp-server /opt/webps/

創(chuàng)建配置文件

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

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

內(nèi)容如下：

{
        "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"]
}

各參數(shù)含義如下，請(qǐng)根據(jù)實(shí)際情況修改：

• HOST:監(jiān)聽I(yíng)P
• PORT:監(jiān)聽端口
• QUALITY:優(yōu)化程度，默認(rèn)為80
• IMG_PATH:站點(diǎn)圖片存放路徑，一般是站點(diǎn)根目錄
• EXHAUST_PATH:緩存路徑，這個(gè)目錄需要自己創(chuàng)建
• ALLOWED_TYPES:哪些圖片后綴需要轉(zhuǎn)換為webp

運(yùn)行WebP Server

上面配置完成后，輸入下面的命令來運(yùn)行WebP Server

#刷新服務(wù)
systemctl daemon-reload
#啟動(dòng)WebP Server
systemctl start webp-server
#開機(jī)啟動(dòng)
systemctl enable webp-server

nginx反向代理

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

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

對(duì)比驗(yàn)證

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

再訪問WebP Server的地址進(jìn)行對(duì)比，可以看到圖像被壓縮為了55.3Kb，MIME類型變?yōu)榱?code>image/webp，壓縮效果非常明顯。

總結(jié)

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

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

• WebP Server項(xiàng)目地址：https://github.com/webp-sh/webp_server_go
• WebP Server幫助文檔：https://webp.sh/docs/

• 上一章：360搜索好搜代碼/百度搜索代碼/淘寶搜索...
• 下一章：寶塔面板用frm和ibd文件恢復(fù)Mysql數(shù)據(jù)