体育外围

當前位置: 首頁 > Linux運維 > 使用WebP Server在不改變URL的情況下將網站圖像轉換為WebP

使用WebP Server在不改變URL的情況下將網站圖像轉換為WebP

發布于:2020-4-7 Linux運維 0條評論 5,793 views
如需VPS代購、PHP開發、服務器運維等服務,請聯系博主QQ:337003006

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

下載WebP Server

作者已經提供編譯好的二進制版本,可以前往:進行下載,下方的命令可能隨著時間推移不是最新版本。

#下載WebP Server
wget -O webp-server http://github.com/webp-sh/webp_server_go/releases/download/0.1.2/webp-server-linux-amd64
#添加執行權限
chmod +x webp-server

創建systemd服務

為保持WebP Server后臺運行,使用systemd服務來管理更加方便,systemd的實踐可以參考我之前的文章《Linux系統編寫Systemd Service實踐》,不過這里WebP Server已經為我們提供好了systemd文件,我們直接使用即可。

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

./webp-server -dump-systemd

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

[Unit]
Description=WebP Server Go
Documentation=http://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

這個服務文件直接讀取的/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/ehtyt.com",
        "EXHAUST_PATH": "/data/caches/ehtyt.com",
        "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 Server
systemctl 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;
}

對比驗證

使用瀏覽器打開http://cdn.ehtyt.com/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用戶。

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

  • WebP Server項目地址:
  • WebP Server幫助文檔:

發表評論