
今年九月 Cloudflare 宣布正式推出「Cloudflare Images」圖片儲存服務,乍看之下好像只是一個付費的圖片空間,影像儲存僅是這個項目的其中一個功能,它還兼具調整圖片大小、最佳化等技術,而且整合全世界所有 Cloudflare 網路節點,將影像基礎架構變得更為簡單,易於管理或是預測價格,無論是線上零售、創作者平台或是內容傳遞都很適合使用。
以往大多數網站對於圖片的處理方式是單一圖片可能會裁切成多個不同的尺寸大小,以便在不同的頁面或裝置上使用(例如在彙整頁面顯示略縮圖,在文章頁面顯示完整尺寸),尤其桌面和行動裝置也會用到不同的圖片尺寸,就需要為單張圖片產生多個副本,最後以內容傳遞網路(CDN)進行傳輸,在管理上將會變得非常棘手,也會增加許多圖片儲存成本。
Cloudflare Images 透過變體(variants)對圖片進行編輯處理,可選擇多種裁切選項,例如將圖片縮小到特定尺寸、維持長寬比放大到特定大小、在必要時進行裁切以完全填充整個區域,更重要的是圖片會被視為單張圖片而不會額外計價。
舉例來說,使用者上傳一張圖片、調整為三種不同大小、兩種不同的圖片格式時,只需要支付單張圖片儲存的費用,而非傳統圖片儲存服務的七張配額(一張原圖、三種尺寸加上各兩種格式)。
當前這項服務可以選擇的參數並不如一些專業圖片處理服務(例如 Imgix、ImageKit),Cloudflare 會持續更新、加入更多編輯功能。
在 Cloudflare Images 價格方面,初始費用為每月 $5 美元(可儲存 100,000 張影像),也有 $10 美元和 $50 美元選項,分別可以儲存最多 200,000 張、1,000,000 張影像,這是屬於預付的價格,圖片傳輸時每遞送 100,000 次會收取 $1 美元費用(後付),Cloudflare Image 以圖片傳輸次數計價,不額外計算流量費用,如果在圖片檔案較大的情況下可以有效節省支出。
Cloudflare Images
https://www.cloudflare.com/zh-tw/products/cloudflare-images/
使用教學
STEP 1
首先,要使用 Cloudflare Images 前需要先註冊 Cloudflare 帳戶,如果你還沒用過,可以參考以下幾篇我寫過的教學文章:
- Cloudflare 免費 CDN、DNS 設定教學,加速網站防惡意攻擊
- 讓 Cloudflare 成為免費 DNS 代管,不開啟 CDN 或 WAF 加速防護功能
- Cloudflare 註冊最便宜網域不加價,整合免費 CDN 和 SSL 憑證
進入 Cloudflare 控制台後選擇「Images」功能就會看到介紹,簡單來說,Cloudflare Images 提供最多 20 個變體來加入調整大小等控制參數,這個項目免費,儲存空間每 100,000 張影像每月 $5 美元算是最低方案,需要在啟用服務前先行付費購買。
在傳送圖片時每傳遞 100,000 張影像需要支付 $1 美元,這部分就沒有上限,要看使用者的用量而定。

STEP 2
接著選擇要使用的儲存容量方案,最低每月 $5 美元可儲存 10 萬張影像,也有每月 $10 美元、$50 美元方案,分別可儲存到 20 萬張、100 萬張影像。

如果有特殊需求(例如需要特定的圖片數量),也可以選擇「自訂」設定 10 萬張的倍數。

STEP 3
最後會顯示你需支付的金額,透過在 Cloudflare 設定的支付方式(信用卡、PayPal)付款。

購買方案後就會看到 Cloudflare Images 主畫面,提供多種上傳圖片方式,接受所有常見圖片格式,包括 JPEG、WEBP 和 GIF,上傳到 Images 的每張圖片最大不能超過 10 MB,如果你只是想要體驗、測試一下這項功能,可以透過「快速上傳」將圖片或資料夾拖曳到瀏覽器上傳圖片。
不過要注意的是 Cloudflare 的 WordPress 官方外掛程式還沒有整合 Images 功能,因此可能要尋找其他替代方案才能串接 API 功能、將網站媒體庫的圖片機上傳到 Cloudflare Images。

STEP 4
將圖片上傳到 Cloudflare Images 就會顯示在下方,包括圖片名稱、上傳時間、預覽、編輯和刪除。

STEP 5
點選圖片預覽就能在右下角「影像 URL」取得圖片鏈結(網址是以 https://imagedelivery.net 開頭已經內建 SSL 功能),這也是 Cloudflare Images 最簡單的使用方式,讓使用者託管圖片、將圖片使用於網站、應用程式或是任何平台。
因為整合 Cloudflare 現有的網路節點,在圖片存取速度上表現非常好,在台灣是直接從台灣的節點提供圖片服務。

STEP 6
Cloudflare Images 有個很重要的「變體」功能,可以想像就是圖片編輯參數,透過這項工具、產生不同的圖片尺寸、大小或是否保留圖片中繼資料(metadata),不過目前只有調整大小選項。

當設定好「變體」後,返回影像點選編輯就會看到不同的圖片網址,以不同變體取得不同圖片網址就能符合不同頁面跟使用情境使用,而且一張圖片如果製作不同變體,也只會佔用一張圖片的使用配額。

取消訂閱 Cloudflare Images 服務
STEP 1
要注意的是 Cloudflare 的 Images 是訂閱服務,也就是訂閱後如果沒有取消,每個月就會依照當初選擇的方案持續扣款,視為有繼續使用,如果想要取消服務,可以到 Cloudflare 帳單「訂閱項目」頁面找到 Cloudflare Images 並點選後方「取消」操作。

STEP 2
取消 Images 時需要勾選最上方的「如果您現在取消」選項,選擇為何要離開、停止使用的原因,選擇後訂閱服務可以持續使用到結帳日最後一天,Cloudflare Images 會依剩餘時間收取費用。

值得一試的三個理由:
- Cloudflare Images 專注於儲存、處理圖片的服務
- 整合 Cloudflare CDN 網路分流加速功能
- 最低方案 $5 美元可儲存 10 萬張圖片