体育外围

當前位置： 首頁 > 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幫助文檔：

發表評論