網(wǎng)站添加圖片 WebP 自動轉(zhuǎn)換功能

wordpress 2024-04-24編輯：重慶網(wǎng)站建設(shè) WordPress 轉(zhuǎn)換 添加

最近這幾天在網(wǎng)上閑逛時，發(fā)現(xiàn)了一個名叫 WebP_Server_Go 的新項目，可以無縫將網(wǎng)站上已有圖片轉(zhuǎn)換為 WebP 格式輸出，同時不改變原始圖片鏈接，看起來挺適合本站需求，使用也比較簡單。

網(wǎng)站使用 WebP 格式圖片的好處是非常明顯的，比起 jpg 有更強的壓縮率

項目地址：https://github.com/webp-sh/webp_server_go

首先去 Releases 頁面下載項目文件，這個項目成品就是一個單文件，沒有后綴格式，為了方便，我這里重命名為 webp-server。

本站服務(wù)器環(huán)境為 CentOS 7.7 64bit，這項目從名稱來看是不支持 32 位系統(tǒng)的。

我這里由于機子是系統(tǒng)盤和數(shù)據(jù)盤分開的，因此把程序丟到/opt/webp/目錄，轉(zhuǎn)換后的輸出文件放在/www/webp/下。

接著 SSH 下切換到此目錄：

cd /opt/webp

讓程序自己創(chuàng)建一個樣本配置文件：

./webp-server -dump-config > config.json

webp-server?是程序的文件名，這個根據(jù)自己實際修改，GO 語言的程序在 Linux 下可以直接運行，非常方便。

然后編輯?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)站情況對應(yīng)修改。

host?是監(jiān)聽地址，默認(rèn)本機一般不用改

port?是端口，這個可以自己設(shè)定，注意由于是本地調(diào)用，防火墻是不需要放行此端口的 。

quality?是轉(zhuǎn)換質(zhì)量，數(shù)字越大畫質(zhì)越好，一般來說默認(rèn)的 80 差不多就剛好了，具體看自己需求。

img_path?是網(wǎng)站圖片存儲路徑，這個只需要設(shè)定到網(wǎng)站所在的目錄即可，具體目錄會通過 nginx 規(guī)則匹配。

exhaust_path?是轉(zhuǎn)換后的緩存輸出目錄，轉(zhuǎn)換后的圖片緩存會放在這里，這個根據(jù)自己情況設(shè)定，我這里設(shè)定在/www/webp 。

allowed_types?這個就不用多說了，指定要轉(zhuǎn)換的源圖片格式，一般網(wǎng)站也就這幾種格式居多，正常來說不用改。

改完配置文件就保存關(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 配置即可。

然后可以先運行測試一下，給程序執(zhí)行權(quán)限：

chmod +x webp-server

直接執(zhí)行，根據(jù)自己 config 文件目錄修改 ：

./webp-server --config /opt/webp/config.json

然后網(wǎng)站上找?guī)讉€有圖片的頁面打開，ssh 里如果看到如下圖這種 save to 的記錄，就是成功轉(zhuǎn)換圖片了：

網(wǎng)頁端 F12 調(diào)出開發(fā)者工具，也可以看到文件后綴名雖然還是 jpg，但類型已經(jīng)變成了 webp：

測試運行正常的話就可以 Ctrl+C 先退出了，來準(zhǔn)備將其添加到開機自啟，用 systemd 來管理。

在程序目錄運行以下命令，讓它創(chuàng)建一個樣本服務(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

啟動程序：

systemctl start webp.service

再查看一下程序狀態(tài)：

systemctl status webp.service

顯示綠色 running 的話就是正在運行了：

再次打開瀏覽器這類測試轉(zhuǎn)換效果，一切正常的話就可以添加到開機自啟了：

systemctl enable webp.service

到此就整個程序配置完畢，可以在支持 webp 的瀏覽器里看到頁面加載速度的明顯提升。

• 上一章：WBOLT 搜索推送管理插件(原百度推送管理...
• 下一章：網(wǎng)頁速度優(yōu)化新思路——使用tmpfs虛擬內(nèi)...