我們的部落格難免少不了圖片，圖片管理是一個不小的難題。如果我們將圖片全部放到我們自己的伺服器上，那麼頻寬就基本上會被圖片所佔滿了，這會導致網站載入很慢（特別是圖片載入很慢）。
什麼是圖床
為了解決圖片的問題，市面出現了很多公司，提供圖床服務：就是將圖片上傳到他們的伺服器，然後返回一個圖片連結給你，這樣我們就可以在部落格中引用這個圖片，我們自己的伺服器只需返回前端 HTML 和 JS 等小檔案，載入速度很快。並且，圖床服務的背後使用了一些 CDN 等技術，可以使得圖片的訪問速度很快
我們在選擇圖床的時候，請慎重選擇免費圖床，畢竟眾多免費圖床網站註冊條款裡有禁止商用這一條，哪天關閉了圖片外鏈或者商用，勢必給使用者帶來很大的麻煩，比如我們部落格的所有圖片突然都看不到了！很多免費圖床總是好景不長，因為做圖床是要投入的，比如伺服器、頻寬、人員、技術投資、市場宣傳等，完全免費了，這些小站可能自己都難存活，所以總是不能長久使用！
也有人使用 Gitee 作為圖床，但 Gitee 突然加上了防盜鏈功能，導致很多人的部落格的圖片都失效了：突發，Gitee 圖床廢了_程式設計師魚皮的部落格-CSDN 部落格
圖床的基本術語和常見圖床
對於數字和文字型別的資料，比方說名字和電話號碼相關的資訊，我們通常會用資料庫去儲存（例如 MySQL、Oracle 等）。
但對於圖片這樣的檔案物件，儲存層不太可能再用資料庫，應該改用專業的物件儲存，比如亞馬遜的 S3（Amazon Simple Storage Service，簡單儲存服務，因為是三個 S 開頭的單詞，所以叫 S3），或者阿里雲的 OSS（Object Storage Service）。
在物件儲存中，有幾個概念需要了解（看不懂就算了...）：
-
桶：可以理解為一個現實生活中的桶，裡面存放的就是檔案了。可以有多個桶，例如這個桶用來存放圖片當作圖床用，另一個桶用來存放影片當網盤用等等……
-
物件：就是一個個檔案物件了，這個物件包括三個部分：Key、Data、Metadata。Key： 可以理解檔名，是該物件的全域性唯一識別符號（UID）。Data 也就是使用者資料本體。這個不用解釋了。
Metadata 叫做 後設資料 ，它是物件儲存一個非常獨特的概念。後設資料有點類似資料的標籤，標籤的條目型別和數量是沒有限制的，可以是物件的各種描述資訊。
舉個例子，如果物件是一張人物照片，那麼後設資料可以是姓名、性別、國籍、年齡、拍攝地點、拍攝時間等。
在傳統的檔案儲存裡，這類資訊屬於檔案本身，和檔案一起封裝儲存。而物件儲存中，後設資料是獨立出來的，並不在資料內部封裝。
後設資料的好處非常明顯，可以大大加快物件的排序，還有分類和查詢。
目前提供圖床服務的有很多：
- 阿里雲：物件儲存 OSS_雲端儲存服務
- 華為雲：物件儲存服務 OBS 官網
- 騰訊雲：物件儲存資料處理_COS 資料處理
- 七牛雲：物件儲存 Kodo_雲端儲存
- 百度雲：物件儲存 BOS_雲端儲存
- 網易雲：物件儲存服務 NOS
- ................
物件儲存這個技術，不同的雲廠商有不同的英文縮寫命名。例如阿里雲把自家的物件儲存服務叫做 OSS，華為雲叫 OBS，騰訊雲叫 COS，七牛叫 Kodo，百度叫 BOS，網易叫 NOS……五花八門，反正都是一個技術。
在機緣巧合之下，我用過一段時間的七牛雲，因此後續也是使用的七牛雲了，這裡也是以七牛云為例（其他圖床的使用方法是類似的）。
七牛雲入門
先去官網註冊一個賬號，然後去， 物件儲存 裡，新增物件儲存功能，新建空間的意思就是新建一個儲存空間：
例如這裡我新建了一個空間 vuepresslearn 用來當測試：
注意，新建的空間只有一個臨時域名，如果要長久使用得有一個正式的域名，例如我圖床的域名是 image.peterjxl.com：
然後我們點選檔案：
就可以上傳檔案了：
然後點選選擇檔案，就會彈出選擇檔案的對話方塊。是否要上傳覆蓋按需選擇
例如我上傳了一張圖片，上傳檔案後，就可以獲得其訪問連結：
然後訪問該連結，就可以看到圖片了
博主本人新建了一個 blog 目錄，專門用來存放部落格的圖片；還建立了其他目錄，用來存放其他專案的圖片。是否要在空間裡建立目錄看自己的需求。
繫結域名
七牛雲預設提供的測試域名是會過期的，要想長久使用，得繫結一個域名：
這裡我隨意輸入了一個域名：
然後就能獲取到一個 CNAME：
然後去到我的域名解析商控制檯裡（我用的是阿里雲），配置這個 cname，參考 如何配置域名的 CNAME - 七牛開發者中心：
這樣使用者訪問的我圖片 image.peterjxl.com/1.jpg，就會透過 CNAME 重定向到七牛雲的連結上去，然後獲取圖片。
配置完後，DNS 生效後就可以在域名管理裡看到狀態是成功的：
需要注意的是，如果你的儲存空間是私有的，那麼圖片的外鏈會有很多的引數；例如：
如果去掉 jpg 後面的引數，是訪問不了的，這是七牛雲的規則。設定成公有的，圖片才不會有這麼多引數：
設定完後：
使用 HTTPS
由於我的部落格使用了 HTTPS，如果圖床沒有使用的話，會不安全，因此也得加上 HTTPS。
為此，我們需要先購買一個域名證書。由於我之前已經購買過證書了，因此後續有些步驟我僅僅是演示用，沒有實際購買等，具體可以參考：部落格圖床最佳解決方案_隔壁鄭同學的部落格-CSDN 部落格，這裡簡單提提怎麼買。
開啟證書管理：七牛雲 - 證書管理，點選購買證書
一般來說選個最便宜即可，我們不是企業型，用不上那麼貴的：
然後就可以配置 HTTPS 了：由於我之前已經購買了證書，這裡就不繼續往下演示了
圖片上傳工具
我的部落格是基於 Markdown 的，如果我們每次上傳圖片都需要登入到七牛雲控制檯並上傳，就太慢了。因此市面上出現了很多圖片上傳工具，能實現的效果是這樣的：將圖片拖拽到工具裡，就能自動上傳到物件儲存裡，並且獲取圖片連結，極大簡化了我們的操作。
目前常見的工具有：
- PicGo：支援 Windows，Mac 和 Linux，基於 Electron 開發，支援多種圖床上傳
- iPic：只支援 Mac
博主使用的是 PicGo，我們先下載，然後開啟配置：
Bucket 就是儲存桶的意思，一般就是你新建的空間的名字
訪問地址就是繫結的域名
設定儲存路徑：比如在儲存桶裡，我還分了幾個目錄，專門用一個 blog 目錄用來存放部落格的圖床，如果你沒有設定，可以不寫儲存路徑
至於怎麼配置，可以參考文件：配置手冊 | PicGo。至於怎麼獲取 AK 和 SK（AccessKey 和 SecretKey），要去七牛雲 - 金鑰管理 裡獲取，或者在右上角--金鑰管理：
獲取 AK 和 SK：
配置完 PicGo 後，就可以實現將圖片拖拽上傳到圖床的效果了，方便了不少：
Typora + PicGo
由於經常需要上傳圖片到圖床，為了方便我們寫文件，Typora（一款 Markdown 編輯器）也在 2022 年整合了 PicGo，可以實現在 Typora 裡，對著圖片右鍵，就可以上傳圖片
還可以批次上傳：
配置方法：開啟 Typora 的設定，進入影像選項卡部分：然後設定上傳服務即可
更多可以參考 Typora 官方文件：Upload Images - Typora Support
上傳圖片並修改 Markdown 檔案
對於我來說，我通常是在一個思源筆記（一個支援 Markdown 語法的筆記軟體）裡寫好文章，然後匯出為 Markdown，再上傳到部落格的，如果部落格的圖片比較多，那麼開啟一個個然後逐個上傳圖片也是很麻煩的……為此博主曾打算自己寫一個軟體，可以一鍵將 Markdown 檔案裡的所有圖片都上傳到圖床，並且自動修改 Markdown 檔案裡的圖片連結，這樣 Markdown 檔案就可以直接釋出到部落格上了，非常方便。
但是在動手造輪子之前，先在 GitHub 上搜尋了有沒人造好了輪子，還真發現了不少… 還好沒有自己動手。以下是我搜到的：
- Markdown 檔案圖片自動上傳七牛雲並更新檔案：博主目前在用的，直接在 Markdown 檔案上右鍵--upload 即可，非常方便，為此我還特地 fork 專案並加了一些說明，Peter-JXL/foureggs
- markdown-img-icexmoon · PyPI：文件齊全，一個 Python 包，暫未使用過
- free-free/iclouder: markdown：支援水印等功能，還未使用過
- lhui/qiniuClient: 雲端儲存管理客戶端：功能齊全，看上去很不錯。
- img-go: Markdown 圖片輔助工具 ：功能齊全，看上去很不錯。
如果你覺得上述的專案都不符合自己的需求，想自己寫，也不難，七牛雲官方文件裡提供了各種程式語言上傳檔案的介面：直傳檔案_API 文件
網上也有不少人自己寫的：node+express 簡單的實現檔案上傳 到 七牛雲端儲存中 - 掘金
防盜鏈和白名單
網際網路並非一片淨土，只有是網站就有被攻擊的風險，而被攻擊最直接的損失就是金錢和時間上的損失，例如圖床是有流量限制的，如果一直有人盜刷，就會造成流量耗盡，圖床用不了，可以參考小林 coding 的部落格：我的網站第一次被攻擊了
為此，我開啟了防盜鏈功能，部落格裡的圖片只能在部落格裡看到，如果你複製到其他網站上，是看不到的。當然這也有缺點，就是不方便了，比如博主在本地執行部落格，也是看不到圖片的；並且也不方便其他人轉載；
但如果實在想要在其他網站顯示你的圖床上的圖片，可以加白名單，這樣就可以顯示了（注意白名單還得加上七牛雲，不然在七牛雲裡也看不到圖片，為此我還特地提了個工單諮詢過 😅，就離譜）
接下來說下七牛雲裡如何開啟防盜鏈和配置白名單：開啟儲存空間，然後進入域名管理，然後點選域名管理：
然後在訪問控制裡就可以配置是否開啟防盜鏈和白名單了：
開啟白名單：
七牛雲日誌下載
可以將訪問的日誌下載下來分析，較少用（我是用來分析防盜鏈的時候才用到）：
下載日誌地址：https://portal.qiniu.com/cdn/log
或者透過 API 來下載日誌，參考文件：https://developer.qiniu.com/fusion/api/1226/download-the-log
CDN 日誌的下載方式，以及日誌中欄位的含義參考文件：https://developer.qiniu.com/fusion/manual/3847/cdn-log-fusion
GitHub 防盜鏈的問題
博主曾嘗試在 GitHub 上顯示七牛雲的圖片，即使加了白名單也不行；後續經過諮詢一些朋友和分析日誌，GitHub 獲取圖片的方式可能是後臺直接透過 curl 等工具獲取的，因此 refer 是空的，無法透過白名單的方式獲取，而 Gitee 的話則加上 Gitee.com 即可，CDN 的日誌對比如下：
116.21.31.192 MISS 104 [20/Feb/2023:21:51:50 +0800] "GET https://image.peterjxl.com/TimeRecorder/TimeRecorder-summary.jpg HTTP/2.0" 200 43824 "https://gitee.com/peterjxl/TimeRecorder" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36"
140.82.115.62 MISS 1 [20/Feb/2023:21:04:54 +0800] "GET https://image.peterjxl.com/TimeRecorder/TimeRecorder-label.jpg HTTP/1.1" 403 351 "-" "github-camo (325d2008)"
可以看到 GitHub 的 refer 是空的，因此無法在 GitHub 上顯示加了防盜鏈的圖床圖片。Gitee 沒有這樣的問題。
解決辦法：將圖片上傳到 Git 專案裡，然後 Markdown 檔案裡引用相對路徑即可。
CDN 重新整理
七牛雲使用了 CDN，也就是快取，因此如果將舊的圖片刪除，上傳一個新的圖片的話，由於快取沒更新，訪問的時候還是舊的圖片，因此得重新整理 CDN 快取，才能看到新圖片。
快取是有時間期限的，即使不重新整理，過一段時間也會自動更新（具體多久得諮詢七牛雲了）。
重新整理方法：開啟七牛雲 - 重新整理預取，然後輸入要重新整理的檔案路徑：
直接重新整理整個目錄也可以，這樣即使目錄裡的圖片超過 500 個，也會全部重新整理。
如果重新整理後還是看到舊圖片，可以嘗試更換瀏覽器看看是否因為快取問題。
參考：重新整理預取_使用指南_CDN - 七牛開發者中心
圖片壓縮
太大的圖片，不僅會影響載入速度，也會使得網站流量變大。
為此，有必要在上傳圖片之前，先自行確認下圖片的大小，我的建議是：超過 1M 的圖片都壓縮一次。
此外，還可以在七牛雲後臺看到最耗費流量的圖片：CDN → 統計分析 → 日誌分析 → TOP URL/IP
透過這個步驟，可以看到最耗費流量的前幾個圖片，然後進行壓縮，重新上傳，能極大地緩解網站壓力，提高使用者體驗。
注意，上傳圖片後得重新整理 CDN 快取，否則還是會用到舊圖片的。具體步驟：去到檔案管理，搜尋該圖片，然後右鍵 → 更多 → 重新整理 CDN 快取
那麼，如何壓縮圖片呢？這個就各顯神通了。我個人用的工具是一個線上網站：tinypng.com，完全免費，可以批次壓縮 20 張圖片，最大 5MB。
該網站還提供了：
- API ，開發者可以呼叫它來為自己的產品提供圖片壓縮服務，但每月只能呼叫 500 次。
- Mac 的桌面端工具 TinyPNG4Mac，開源在 GitHub，可以壓縮超過 5M 的圖片。
也試過很多國內的工具，但基本都是收費的。收費也有收費的好處，功能更多，支援更大的圖片。
- pdf365壓縮：pdf365.cn/img-compress
- 福昕壓縮大師：www.foxitsoftware.cn/shipinyasuo
- docsmall：docsmall.com/image-compress
- .......
對我來說，免費的夠用了。
使用 webp / avif 格式
webp 和 avif 格式比起傳統的 jpg 格式體積更小，也是目前非常主流的圖片格式。
WebP 使用了更優的影像資料壓縮演算法，能帶來更小的圖片體積。例如微信文章裡的很多圖片都是 webp 格式，例如我隨機儲存一張圖片：
avif 格式壓縮的更厲害，體積更小。我們在訪問 B 站的時候就可以看到它用的圖片都是 avif 格式了：
但是這兩種格式得考慮相容性問題，讀者可以去 caniuse.com 搜尋各大瀏覽器的相容情況。
感興趣的同學可以看看這幾篇部落格：
- WebP 相對於 PNG、JPG 有什麼優勢？ | 張洪Heo
- 實現全站圖片使用avif格式，替代臃腫的webp教程 | 張洪Heo
小結
如果遇到什麼使用上的問題，可以電話諮詢七牛雲；如果是什麼技術上的問題，可以發工單：
如果你使用 GitHub Pages 或者 Gitee Pages，那麼直接使用 Git 專案作為圖床也是可以的。
參考
- 物件儲存，為什麼那麼火？ - 知乎
- 部落格圖床最佳解決方案_隔壁鄭同學的部落格-CSDN 部落格
- 四知回--Markdown 檔案圖片自動上傳七牛雲並更新檔案_子午僧的部落格-CSDN 部落格
- 我的網站第一次被攻擊了