網(wǎng)站添加圖片 WebP 自動(dòng)轉(zhuǎn)換功能最近這幾天在網(wǎng)上閑逛時(shí)，發(fā)現(xiàn)了一個(gè)名叫 WebP_Server_Go 的新項(xiàng)目，可以無(wú)縫將網(wǎng)站上已有圖片轉(zhuǎn)換為 WebP 格式輸出，同時(shí)不改變?cè)紙D片鏈接，看起來(lái)挺適合本站需求，使用也比較簡(jiǎn)單。 網(wǎng)站使用 WebP 格式圖片的好處是非常明顯的，
最近這幾天在網(wǎng)上閑逛時(shí)，發(fā)現(xiàn)了一個(gè)名叫 WebP_Server_Go 的新項(xiàng)目，可以無(wú)縫將網(wǎng)站上已有圖片轉(zhuǎn)換為 WebP 格式輸出，同時(shí)不改變?cè)紙D片鏈接，看起來(lái)挺適合本站需求，使用也比較簡(jiǎn)單。
網(wǎng)站使用 WebP 格式圖片的好處是非常明顯的，比起 jpg 有更強(qiáng)的壓縮率
項(xiàng)目地址：https://github.com/webp-sh/webp_server_go
首先去 Releases 頁(yè)面下載項(xiàng)目文件，這個(gè)項(xiàng)目成品就是一個(gè)單文件，沒(méi)有后綴格式，為了方便，我這里重命名為 webp-server。
本站服務(wù)器環(huán)境為 CentOS 7.7 64bit，這項(xiàng)目從名稱來(lái)看是不支持 32 位系統(tǒng)的。
我這里由于機(jī)子是系統(tǒng)盤和數(shù)據(jù)盤分開(kāi)的，因此把程序丟到/opt/webp/目錄，轉(zhuǎn)換后的輸出文件放在/www/webp/下。
接著 SSH 下切換到此目錄：
cd /opt/webp
讓程序自己創(chuàng)建一個(gè)樣本配置文件：
./webp-server -dump-config > config.json
webp-server?是程序的文件名，這個(gè)根據(jù)自己實(shí)際修改，GO 語(yǔ)言的程序在 Linux 下可以直接運(yùn)行，非常方便。
然后編輯?config.json?文件，：
{
"HOST": "127.0.0.1",
"PORT": "3333",
"QUALITY": "80",
"IMG_PATH": "/www/wwwroot/pzo.cc",
"EXHAUST_PATH": "/www/webp",
"ALLOWED_TYPES": ["jpg","png","jpeg","bmp"]
}
配置文件內(nèi)容根據(jù)自己網(wǎng)站情況對(duì)應(yīng)修改。
host?是監(jiān)聽(tīng)地址，默認(rèn)本機(jī)一般不用改
port?是端口，這個(gè)可以自己設(shè)定，注意由于是本地調(diào)用，防火墻是不需要放行此端口的 。
quality?是轉(zhuǎn)換質(zhì)量，數(shù)字越大畫質(zhì)越好，一般來(lái)說(shuō)默認(rèn)的 80 差不多就剛好了，具體看自己需求。
img_path?是網(wǎng)站圖片存儲(chǔ)路徑，這個(gè)只需要設(shè)定到網(wǎng)站所在的目錄即可，具體目錄會(huì)通過(guò) nginx 規(guī)則匹配。
exhaust_path?是轉(zhuǎn)換后的緩存輸出目錄，轉(zhuǎn)換后的圖片緩存會(huì)放在這里，這個(gè)根據(jù)自己情況設(shè)定，我這里設(shè)定在/www/webp 。
allowed_types?這個(gè)就不用多說(shuō)了，指定要轉(zhuǎn)換的源圖片格式，一般網(wǎng)站也就這幾種格式居多，正常來(lái)說(shuō)不用改。
改完配置文件就保存關(guān)閉，然后去修改網(wǎng)站的 nginx 配置文件，添加以下內(nèi)容：
location ^~ /wp-content/uploads/ {
proxy_pass http://127.0.0.1:3333;
}
我這里是 wordpress 網(wǎng)站，所以監(jiān)控/wp-content/uploads/目錄，效果如下圖：
改完保存，重載 nginx 配置即可。
然后可以先運(yùn)行測(cè)試一下，給程序執(zhí)行權(quán)限：
chmod +x webp-server
直接執(zhí)行，根據(jù)自己 config 文件目錄修改 ：
./webp-server --config /opt/webp/config.json
然后網(wǎng)站上找?guī)讉€(gè)有圖片的頁(yè)面打開(kāi)，ssh 里如果看到如下圖這種 save to 的記錄，就是成功轉(zhuǎn)換圖片了：
網(wǎng)頁(yè)端 F12 調(diào)出開(kāi)發(fā)者工具，也可以看到文件后綴名雖然還是 jpg，但類型已經(jīng)變成了 webp：
測(cè)試運(yùn)行正常的話就可以 Ctrl+C 先退出了，來(lái)準(zhǔn)備將其添加到開(kāi)機(jī)自啟，用 systemd 來(lái)管理。
在程序目錄運(yùn)行以下命令，讓它創(chuàng)建一個(gè)樣本服務(wù)文件：
./webp-server -dump-systemd > /lib/systemd/system/webp.service
然后去/lib/systemd/system/目錄下，編輯 webp.service 文件，文件樣例內(nèi)容如下：
[Unit] Description=WebP Server Documentation=https://github.com/n0vad3v/webp_server_go After=nginx.target [Service] Type=simple StandardError=journal AmbientCapabilities=CAP_NET_BIND_SERVICE WorkingDirectory=/opt/webp ExecStart=/opt/webp/webp-server --config /opt/webp/config.json ExecReload=/bin/kill -HUP $MAINPID Restart=always RestartSec=3s [Install] WantedBy=multi-user.target
WorkingDirectory 和 ExecStart 都設(shè)定成程序目錄，比如我的配置文件里就都改成了/opt/webp/ 。
保存退出，然后重新加載服務(wù)配置：
systemctl daemon-reload
啟動(dòng)程序：
systemctl start webp.service
再查看一下程序狀態(tài)：
systemctl status webp.service
顯示綠色 running 的話就是正在運(yùn)行了：
再次打開(kāi)瀏覽器這類測(cè)試轉(zhuǎn)換效果，一切正常的話就可以添加到開(kāi)機(jī)自啟了：
systemctl enable webp.service
到此就整個(gè)程序配置完畢，可以在支持 webp 的瀏覽器里看到頁(yè)面加載速度的明顯提升。
版權(quán)所有：深圳市網(wǎng)商在線科技有限公司
