動態轉換圖片格式為webp

語言: CN / TW / HK
時間 2022-05-19 00:15:03

前言

webp是谷歌推出的一種影象格式，它可以在保持同樣質量的情況下，體積比JPG少40%，可以很大程度的節省頻寬使用，提升網站的載入速度。

由於它是新推出不久的格式，對於一些比較舊的瀏覽器，它是不支援的。那麼有沒有辦法讓支援此格式的瀏覽器載入webp圖片，讓不支援的瀏覽器載入正常圖片呢？

本文就跟大家分享一種解決方案，歡迎各位感興趣的開發者閱讀本文。

思路分析

我們想實現這個需求，首先得需要有一個能將普通的圖片格式轉換為webp格式的程式，經過一番尋找後，找到了一個名為webp_server_go的開源專案。

轉換程式我們有了，那麼如何動態呼叫這個程式呢？我們的需求是根據客戶端的情況來決定是否要返回webp格式的圖片，那麼我們就可以在nginx中通過反向代理來實現動態呼叫。

我們來梳理下思路：

  • nginx攔截客戶端請求，將請求反向代理到webp_server_go
  • webp_server_go收到請求後，讀取http_header中的瀏覽器資訊，決定是否要返回webp格式的圖片
  • 最後，nginx將webp_server_go返回的內容發給瀏覽器

編譯轉換程式

webp_server_go的releases頁面提供了linux的安裝包，如果你的執行環境正好滿足條件，可以跳過此章節，直接下載即可。

這個程式採用go語言編寫，因此需要安裝go的開發環境，由於安裝過程較為簡單，本文不做講解。按照教程搭建好環境後，我們把專案clone到本地，目錄如下所示：

image-20220518213243428

我們開啟Makefile檔案（推薦使用GoLand來開啟），執行檔案裡面的default命令

image-20220518213515632

如果你的編輯器不支援點選圖示來執行，那麼你可以在終端進入專案的根目錄，按照順序執行如下所示的命令：

bash make clean go build -o builds/webp-server-$(OS)-$(ARCH) .

執行成功後，你會在builds目錄下看到編譯出來的適用於你當前系統的應用程式（如果你的系統是macos，看到的結果會和我的一樣，如果是windows看到的則是一個exe檔案）。

image-20220518214528472

執行轉換程式

按照官網列舉的使用方法，我們在使用者的根目錄建立一個名為webp-server的資料夾，將準備好的轉換程式複製進去並在其目錄下建立一個名為config.json檔案，寫入如下所示的內容：

  • HOST 啟動後的服務地址
  • PORT 服務埠號
  • QUALITY 轉換後的圖片質量
  • MAX_JOB_COUNT 最大併發轉換量
  • IMG_PATH 圖片儲存路徑（客戶端訪問圖片資源時的儲存目錄）
  • EXHAUST_PATH 轉換為webp後的圖片儲存路徑（客戶端請求資源時會優先從這裡找，找不到才會觸發轉換程式，轉換完成後會儲存到此處）
  • ALLOWED_TYPES 需要處理的圖片格式

```json { "HOST": "127.0.0.1", "PORT": "8082", "QUALITY": "80", "MAX_JOB_COUNT": "10", "IMG_PATH": "/Volumes/DataStorage/fileStorage", "EXHAUST_PATH": "/Volumes/DataStorage/fileStorage/uploads/cache", "ALLOWED_TYPES": ["jpg", "png", "jpeg", "bmp"] }

```

最後，在終端執行如下所示的命令來啟動轉換程式：

bash ./webpServer --config=config.json

看到如下所示的介面時，就代表此服務已經正常工作了。

image-20220518225743246

注意：大多數情況下你應該是需要此程式靜默執行的，不希望看到這個執行框，那麼你就需要用到nohup命令來執行程式了。

例如：nohup ./webpServer --config=config.json > /Volumes/DataStorage/logs/webpServer-log.txt &

對此命令不熟悉的開發者，請移步Linux nohup 命令作進一步瞭解。

反向代理客戶端請求

做完上述配置後，我們就可以配置nginx來攔截客戶端的請求，將其反向代理至我們上一步搭建的好服務上，配置如下所示：

  • 所有攜帶包含uploads的請求全部交給webpserver進行處理

bash # 反向代理uploads目錄下的圖片至webpserver進行格式轉換 location ~ ^/(uploads)/ { proxy_pass http://127.0.0.1:8082; proxy_set_header X-Real-IP $remote_addr; proxy_hide_header X-Powered-By; proxy_set_header HOST $http_host; }

最後，我們訪問網站來看下是否成功，如下所示：

image-20220518231447321

返回的圖片已經是webp格式了

image-20220518231527544

寫在最後

至此，文章就分享完畢了。

我是神奇的程式設計師，一位前端開發工程師。

如果你對我感興趣，請移步我的個人網站，進一步瞭解。

  • 文中如有錯誤，歡迎在評論區指正，如果這篇文章幫到了你，歡迎點贊和關注😊
  • 本文首發於神奇的程式設計師網站，未經許可禁止轉載💌
「」
「」