最佳化部落格Ⅰ-壓縮圖片為webp格式

LemonDus發表於2024-12-05
Web

自動壓縮部落格圖片為webp格式

作為自己的個人部落格，我非常喜歡搞一些花裡胡哨的東西，其中就包括不少精美圖片，但是過多的圖片會佔用大量的網路資源導致部落格載入速度變慢。
那怎麼辦呢？

第一個想到的就是升級我那頻寬2M的伺服器，不過經費有限只能另尋出路。隨即我又想到了壓縮圖片，既然圖片很多那就壓縮圖片再上傳，這樣就能節約不少因為大圖佔用的資源，於是我找了一個壓縮網站叫recompressor，能夠將大多數圖片大小壓縮到一半以下.

但是用了一陣以後我發現...好麻煩！每次都要自己手動壓縮(ㄒoㄒ)。

這時候我又在想，有沒有什麼東西能夠自動壓縮上傳的圖片呢？經過我的一番查詢與實踐，就要請出今天的主角了“ webp_server_go”！

webp_server_go

WebP

首先說明一下什麼是WebP壓縮演算法，WebP是一種有失真壓縮演算法，基於VP8影片格式的幀內編碼，並以RIFF作為容器格式。因此，它是一個具有八位色彩深度和以1:2的比例進行色度子取樣的亮度-色度模型（YCbCr 4:2:0）的基於塊的轉換方案。不含內容的情況下，RIFF容器要求只需20位元組的開銷，依然能儲存額外的 後設資料(metadata)。WebP影像的邊長限制為16383畫素。

webp_server_go

而webp_server_go的原理就是，當我們的部落格請求一張圖片並將其轉發到了到了webp_server_go時候，它就會將圖片進行壓縮最後返回webp格式的圖片，並且壓縮後的webp圖片會儲存下來方便以後複用，避免了多次壓縮。

部署webp_server_go

新建一個存放二進位制檔案和 config.json 檔案的目錄（可自定義）：

mkdir /opt/webps

cd /opt/webps

下載webp_server_go的二進位制檔案並賦予許可權

wget https://github.com/webp-sh/webp_server_go/releases/download/0.1.0/webp-server-linux-amd64 -O webp-server

chmod +x webp-server

建立 config.json配置檔案

{
        "HOST": "127.0.0.1",
        "PORT": "3333",
        "QUALITY": "80",
        "IMG_PATH": "/root/.halo",
        "EXHAUST_PATH": "/opt/exhasut",
        "ALLOWED_TYPES": ["jpg","png","jpeg"],
        "ENABLE_AVIF": false
}

引數解釋：

  1. HOST：一般不修改。
  2. PORT：webp_server_go 的執行埠。
  3. QUALITY：轉換質量，預設為 80%。
  4. IMG_PATH：需要轉換圖片的資料夾，選擇.halo的上一級目錄
  5. EXHAUST_PATH：webp格式圖片輸出路徑
  6. ALLOWED_TYPES：需要轉換的格式
  7. 預設禁用 AVIF 支援，因為將影像轉換為 AVIF 會消耗 CPU

然後將webp_server_go納入系統管理

建立 service 檔案：

vim /etc/systemd/system/webps.service

寫入：

[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/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
ExecReload=/bin/kill -HUP $MAINPID
Restart=always
RestartSec=3s


[Install]
WantedBy=multi-user.target

然後執行systemctl命令執行：

systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service

檢視執行狀態：

systemctl status webps.service

若成功執行則會輸出以下日誌：
webp-server
至此webp_server_go就安裝好啦！

接下來還有最後一步！

Nginx反向代理

由於我的部落格使用Nginx做了反向代理，因此需要進行一些配置將圖片轉發到webp_server_go，在server節點新增如下配置：

location ^~ /upload/ {
        proxy_pass http://127.0.0.1:3333;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Powered-By;
        proxy_set_header HOST $http_host;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

最後過載Nginx配置，若是寶塔之類則儲存就生效了：

nginx -t 

nginx -s reload

讓我們來測一測部落格最佳化了多少吧！

未安裝webp_server_go之前：
webp_before
足足花了13.52秒！這是一個無法容忍的時間

我們再看看安裝後的網站速度：
webp_after

瞬間速度暴漲，僅僅只有1.94秒，花費的時間只有之前的零頭，而且可以看到圖片格式也都變成了webp格式！

這下可以安心花裡胡哨了(●ˇ∀ˇ●)

相關文章