⚡️ 省錢 90%！我是這樣優化網站圖片的

2021 年一直沒有怎麼更文，2022 準備開個好頭，所以先挑些簡單的內容寫一寫，記錄一下我是如何把個人站點的檔案儲存資費降低 90% 的。

如果你喜歡我的文章，希望點贊? 收藏 ? 評論 ? 三連支援一下，謝謝你，這對我真的很重要！

服務選擇

我開始寫文章大概是三年前，當時有個很現實的問題是不知道圖片上傳到哪裡。

之前大多數人會把圖片託管到新浪圖床上，但是新浪圖床當時開啟了鑑權操作（通過 referer 限制），非新浪站點不會展示圖片，雖然可以通過空 referer 的方式繞過，但是也不是長久之計；另外也有人把圖片託管到 GitHub Gitee 上，但是受限於網速和容量也不是最優的選擇。

後來經過一番調研，發現其實可以用各大雲廠商的檔案儲存功能實現，資費也不貴。因為看不懂阿里雲的檔案儲存文件，就選擇了騰訊雲的 COS 檔案儲存服務。

儲存服務搞定後，就是挑一款順手的客戶端了。市面上有很多的圖床客戶端：

名稱	是否免費	是否跨平臺	應用體積
iPic	否	只支援 Mac	小
uPic	是	只支援 Mac	小
PicGo	是	基於 electron，跨平臺	非常大

我這裡選擇了免費又輕量的 uPic，完美滿足我的圖片上傳需求。

問題出現

配置好個人的圖床服務後，差不多兩年時間都是無感知的，上個月發現今年的流量費用翻倍，於是想著優化一下圖片降低一些費用。

首先分析了一下我的文章教程，其中流量大頭是我寫的「web scraper 教程」，全網閱讀量預估有 80w，其中 80% 的圖片請求都會落到我的 COS 源站上，造成流量費用。

經過排查，目前 COS 流量的主要消耗途徑為 3 個地方：

部落格園：部落格園不支援 md 檔案裡的圖片直接轉部落格園公鏈，當時圖省事直接用的 COS 連結
少數派：編輯器能力較弱，也不支援自動轉公鏈，也是用的 COS 連結
個人部落格：流量較小可忽略

找到問題後我們就可以逐步優化了。

優化一：referrer 鑑權

這個優化比較早，大概使用 COS 幾個月後就做了。因為文章釋出一段時間後，我就發現很多原創文章都被站群網站「採集」去優化 SEO 了。

這種事情是無法杜絕的，但是對我來說這些站點都會給我的圖片 COS 服務造成頻寬和資費壓力，在權衡利弊後，我決定學習新浪微博圖床的做法，限制訪問許可權：

只允許白名單裡的域名請求圖片
更近一步，限制空 referrer 請求，因為很多刷 SEO 站點會在 HTML 裡配置 <meta name="referrer" content="noreferrer">，通過空 referrer 繞過鑑權

開啟 referrer 鑑權後，經過觀察流量有一定的下降，也多了非常多的 403 錯誤碼，說明攔截還是有效的。但因為處理時間較為久遠，我也忘了具體收益了。

優化二：壓縮圖片

referer 優化之後，我就很長時間（大概一年半）沒有處理圖片了，2021 年年底的時候，我發現買的定量流量包每次到月中就用完了。降低流量佔用最快速的方法就是壓縮圖片了，於是我做了以下工作：

1.tinify 壓縮

這裡我用了 tinify.cn 這個網站，個人認為它的質量最高，而且支援申請開發者 API，每個月有 500 張的免費份額，算了一下 COS 上一共 450 張圖片，正好在額度內，沒什麼猶豫的直接開壓。

最後的壓縮成果如下：

壓縮前	壓縮後
111MB	75MB

綜合看上去只縮減了 33% 的體積，實際上壓縮比要比這個高，大概能省 60% 左右，因為 tinify 不支援 GIF 壓縮，而 450 張圖裡有不少 GIF 圖片，所以把資料拉下來了。

為了控制變數，壓縮圖片後我放量觀察了 1 周，看資料效果還是很明顯的，在日請求數（7000左右）不變的情況下，流量消耗下降了 40% 左右：

看到相關資料後我還想進一步壓縮圖片體積，於是又做了以下嘗試。

2.gzip 壓縮

開啟圖片的 HTTP Gzip 壓縮後，發現效果並不是很好，體積收益幾乎為 0。

後來想了一下這也正常，png jpg 其實都是壓縮檔案了，再對壓縮檔案壓縮，收益一般都不會很明顯。因為壓縮還會消耗伺服器資源，所以就關閉了圖片的 Gzip 壓縮。

3.轉移 gif 圖片圖源

png jpg 圖片可以通過壓縮降低流量消耗，gif 圖片既然不能壓縮，那就“轉移支付”吧！

我把部落格園上投放的博文 gif 圖片都換成了部落格園的 CDN，效果也非常明顯，請求數降低了 15%，流量消耗下降了 50%：

2022-01-08_20-50-39_remove_gif

少數派網站因為是文字編輯器模式，操作比較繁瑣就暫不替換了。

4.webp 線上轉換

部分圖片我後面遷移到 CDN 後，騰訊配套的 CDN 服務支援智慧轉換 webp。開啟了服務後，測試了幾張圖片，大概又能下降 30% 左右的體積，但因為 CDN 放量較小，整體收益還不是很明顯。

優化三：CDN 加速

COS 其實一直配套著 CDN 服務，但是之前一直沒有開。這次優化就順便開啟了，然後我就陷入到無盡的後悔中——為什麼我沒有早些開 ?。

CDN 服務開啟後，最大的收益就是載入速度直接降低一個數量級。之前的圖片都是從 COS 源站請求的，每張圖片響應速度大概為 200ms-300ms，開啟 CDN 後直接降到 20ms-30ms，劣化情況下也能保持在 100ms 內：

開啟 CDN 加速後，另外一個意外之喜是我部落格的 Lighthouse 評分都逼近滿分了，不得不說 docusaurus 這個文件框架優化的真不錯，CDN 真香。

lighthouse 評分

總結

到此我的圖片優化就告一段落了，綜合下來看流量資費下降了 90%。總體來看優化的思路並不難，都是顯學，收益這麼大完全是因為之前從來沒有優化過 ?。

後期其實也可以繼續迭代，比如說把舊文章的圖片連結全部換成 CDN 連結，全站 HTTP2 等。但因為優化到這裡收益已經很明顯了，再優化的邊際效應太小了，等遇到下一次的瓶頸再優化也不遲。