動態轉換圖片格式為webp
前言
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到本地,目錄如下所示:
我們開啟Makefile檔案(推薦使用GoLand來開啟),執行檔案裡面的default
命令
如果你的編輯器不支援點選圖示來執行,那麼你可以在終端進入專案的根目錄,按照順序執行如下所示的命令:
bash
make clean
go build -o builds/webp-server-$(OS)-$(ARCH) .
執行成功後,你會在builds
目錄下看到編譯出來的適用於你當前系統的應用程式(如果你的系統是macos,看到的結果會和我的一樣,如果是windows看到的則是一個exe檔案)。
執行轉換程式
按照官網列舉的使用方法,我們在使用者的根目錄建立一個名為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
看到如下所示的介面時,就代表此服務已經正常工作了。
注意:大多數情況下你應該是需要此程式靜默執行的,不希望看到這個執行框,那麼你就需要用到
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;
}
最後,我們訪問網站來看下是否成功,如下所示:
返回的圖片已經是webp格式了
寫在最後
至此,文章就分享完畢了。
我是神奇的程式設計師,一位前端開發工程師。
如果你對我感興趣,請移步我的個人網站,進一步瞭解。
- 文中如有錯誤,歡迎在評論區指正,如果這篇文章幫到了你,歡迎點贊和關注😊
- 本文首發於神奇的程式設計師網站,未經許可禁止轉載💌
- Web端高分屏圖片載入方案
- 樹的子結構
- 合併兩個排序的連結串列
- 實現連結串列反轉
- 獲取連結串列中倒數第K個節點
- 動態轉換圖片格式為webp
- 調整陣列元素順序演算法
- 實現TypeScript中的互斥型別
- 實現TypeScript中的互斥型別
- 實現數值校驗演算法
- 我離職了
- 實現正則表示式匹配演算法
- Go defer的一些神奇規則,你瞭解嗎?
- 實現nest的自定義註解
- 數值的整數次方
- 二進位制中1的個數
- 為程式設計師添上“翅膀”的機器學習軟體 Codex 有多神奇
- 很久很久以前,有一臺神奇的機器···
- 移動開發必知:Kotlin裡面一個神奇的BUG(勸官方早點修復)
- 使用Vue3的CompositionAPI來優化程式碼量