圖片幾乎總是網頁中最重的部分,而你託管它們的方式決定了網站給人的感覺是即時還是遲緩。到了 2026 年,問題不再是「我是否應該最佳化圖片」,而是「它們應該放在哪裡,才能讓最佳化自動發生」。在為流量繁忙的 WordPress 和 PrestaShop 站台於邊緣調整圖片尺寸多年之後,我的答案是 Cloudflare Images。它儲存你的原圖,從 Cloudflare 的全球網路傳遞它們,並即時轉換為新一代格式,這一切都隱藏在一個簡單的 URL 之後。
本指南說明 Cloudflare Images 究竟是什麼,它與單純的 CDN 有何不同,以實際數字計算成本幾何,作為全球圖片傳遞網路如何運作,以及它與 Cloudinary 和自行架設等替代方案相比如何。讀完之後,你將知道它是否是你圖片的合適歸宿,以及如何在今天就開始。
摘要
- Cloudflare Images 只儲存一次原圖,並從 Cloudflare 的全球邊緣傳遞經過最佳化的 WebP/AVIF 版本,沒有輸出費用
- 定價簡單且可預測:每月每 100,000 張儲存圖片 5 美元,每月每 100,000 張傳遞圖片 1 美元
- 你也可以轉換已經託管在他處的圖片(包括 Cloudflare R2 ),而無需將它們存入 Images
- 它用一個產品和一個傳遞 URL,取代了外掛、調整尺寸指令碼和單獨 CDN 的繁雜組合
- 對於 WordPress 和 PrestaShop,你可以將它與我的免費外掛和 Worker 結合,自動重寫每一個圖片連結
Cloudflare Images 究竟是什麼
Cloudflare Images 是一條完整的圖片流水線:儲存、最佳化和傳遞集於一個產品。你只上傳一次原圖,Cloudflare 就給你一個傳遞 URL。當訪客請求該 URL 時,Cloudflare 將圖片調整為你要求的尺寸,轉換為瀏覽器支援的最高效格式(通常是 WebP 或 AVIF),壓縮它,並將結果快取在離該訪客最近的邊緣。
傳遞 URL 看起來像這樣:
1https://imagedelivery.net/<account-hash>/<image-id>/<variant>
結尾的 <variant> 是你定義一次的具名轉換集合(例如 thumbnail、hero 或 1200x675)。你也可以啟用彈性變體,直接在 URL 中傳入寬度、高度、品質和格式。因此,一張原圖就能產生你將來需要的每一種尺寸和格式,而無需你產生或儲存哪怕一個衍生檔案。
這正是本文圖片的傳遞方式。你看到的每一張圖片都使用帶有響應式 <picture> 來源集的 Cloudflare Images 傳遞 URL,這就是它們在行動端和桌面端都能快速載入的原因。
為什麼不只用 CDN
一個常見的反駁是:「我已經在站台前面放了一個 CDN,這還不夠嗎?」它們並不是一回事,而且區別很重要。
單純的 CDN 快取並傳遞你的來源伺服器產生的位元組本身。如果你的來源伺服器儲存了一張 2 MB 的 JPEG,CDN 會樂意更快地傳遞同樣這張 2 MB 的 JPEG。它不會讓圖片更小,不會將其轉換為 AVIF,也不會產生手機實際需要的更小尺寸。
Cloudflare Images 是一個主動層,而非被動快取。它改變圖片本身:
- 將尺寸調整為每個裝置所需的精確尺寸
- 根據請求瀏覽器接受的內容轉換為 WebP 或 AVIF
- 智慧壓縮,使一張 1 MB 的照片變為約 100 至 200 KB
- 將每個衍生版本快取在邊緣,因此工作只需做一次
簡而言之,它改善你的圖片、加速你的網站、提升你的 Core Web Vitals 並節省頻寬。單憑 CDN 只能做到最後一點,而且也只是部分做到。
使用 Cloudflare Images 的兩種方式
有一個讓許多人絆倒的重要區分,所以我把它講清楚。
1. 用 Cloudflare Images 儲存並傳遞。 你將原圖上傳到 Cloudflare Images。Cloudflare 成為你圖片的歸宿及其傳遞網路。對於新專案和圖片密集型站台,這是最乾淨的選擇。
2. 轉換託管在他處的圖片。 如果你的原圖已經在他處,例如物件儲存 Cloudflare R2 或你自己的伺服器,你可以使用 Cloudflare 的圖片轉換在傳遞時即時最佳化它們,而無需在 Images 中儲存第二份副本。這就是「從遠端來源轉換」的模式,我在專門指南 Cloudflare Image Transformations 中有深入講解。
大多數站台出於簡單考量選擇第一種方式。已經在 R2 中保有大型媒體庫的團隊,往往選擇第二種方式,以避免為儲存付兩次費。R2 在這裡尤其有吸引力,因為它沒有輸出費用,我在 在 Cloudflare R2 上託管圖片 的指南中作了詳細拆解。
用清晰數字看 Cloudflare Images 定價
Cloudflare Images 最好的一點是定價確實簡單,沒有意外的輸出費用。截至 2026 年,官方定價 如下:
| 你為何付費 | 費用 |
|---|---|
| 儲存的圖片 | 每 100,000 張 / 月 5 美元 |
| 傳遞的圖片 | 每 100,000 張 / 月 1 美元 |
| 轉換(外部圖片) | 前 5,000 次唯一轉換免費,之後每 1,000 次 0.50 美元 / 月 |
| 輸出頻寬 | 0 美元(免費) |
一個計算範例讓它變得具體。假設你經營一家擁有 10,000 張產品圖片的商店,並在一個月內傳遞 500,000 次圖片瀏覽。儲存費用為 0.50 美元(10,000 張儲存),傳遞費用為 5 美元(500,000 張傳遞),那個月合計約 5.50 美元。沒有單獨的頻寬帳單,沒有按次調整尺寸的費用,也沒有按格式的附加費。
把它與典型的託管圖片服務相比,後者的頻寬和轉換次數可能主導帳單,吸引力便顯而易見:你可以在投入之前預測成本。
Cloudflare Images 比較 Cloudinary 比較自行架設
| 標準 | Cloudflare Images | Cloudinary | 自行架設 + CDN |
|---|---|---|---|
| 自動 WebP/AVIF | 是 | 是 | 僅當你自行建構 |
| 輸出費用 | 無 | 按頻寬分級 | 你支付主機/CDN |
| 定價模型 | 儲存 + 傳遞 | 點數(轉換、儲存、頻寬) | 伺服器 + CDN + 你的時間 |
| 全球邊緣傳遞 | 內建 | 內建 | 取決於 CDN |
| 設定複雜度 | 低 | 低到中 | 高 |
| 成本可預測性 | 非常高 | 較難預測 | 多變 |
Cloudinary 是一款功能豐富的強大產品,但其以點數為基礎的模型將轉換、儲存和頻寬綁在一起,使得規模擴大時更難預測。自行架設給你完全的控制權,但你要負責調整尺寸的流水線、格式協商、快取標頭和 CDN 設定,需要維護的活動元件很多。Cloudflare Images 處於理想的甜蜜點:幾乎全部的好處、極少的營運負擔,以及一份你可以預測的帳單。
WordPress 和 PrestaShop:自動化每一張圖片
如果你經營 WordPress 或 PrestaShop,實際的挑戰是讓頁面上的每一張圖片都使用經過最佳化的傳遞 URL,包括由佈景主題、外掛和內嵌 CSS 注入的圖片。我正是為此建構了免費工具。
- WordPress 外掛。 我的 Cloudflare Image Resizing 外掛 (原始碼在 GitHub )會重寫圖片連結,使它們經過 Cloudflare 的最佳化。
- Cloudflare Worker。 為實現完整涵蓋,我的 Cloudflare Image Resizing Worker 位於你的站台與訪客之間,重寫最終的 HTML,包括 CSS 中的圖片,這是單憑外掛無法觸及的。
我為兩個平台都寫了完整的逐步教學:針對 WordPress 的 Cloudflare Image Resizing 和 針對 PrestaShop 的 Cloudflare Image Resizing 。如果你使用其中任一平台,請在讀完本概覽後從那裡開始。
有一項重要更新值得強調:轉換圖片以前需要付費的 Pro 方案。現在不再如此。圖片轉換現在在免費方案中也可使用,每月最多 5,000 次唯一轉換,大大降低了小型站台的門檻。
無需儀表板管理你的圖片
透過網頁儀表板上傳和整理圖片,在檔案不多時還行,但規模大了就變得繁瑣。如果你將原圖儲存在 Cloudflare R2 中(媒體庫的常見模式),我建構了一款免費桌面應用程式讓這件事變得輕鬆:Easy Cloudflare R2 讓你瀏覽儲存桶、拖放上傳、編輯物件中繼資料,並在 Windows、macOS 和 Linux 上的一個簡潔介面中管理一切。若要直接使用 Cloudflare Images 產品,Easy Cloudflare Images 在上傳和最佳化你的圖片庫方面提供同樣的功能。
今天如何開始
- 登入你的 Cloudflare 儀表板,並從側邊欄啟用 Images。
- 上傳一張測試圖片,或將一個轉換指向既有的圖片 URL。
- 為你網站最常用的尺寸建立一兩個變體(variant)(例如一個 hero 和一個縮圖)。
- 用新的傳遞 URL 替換網站上的一張圖片,並在 PageSpeed Insights 上進行前後對比測試。
- 如果你使用 WordPress 或 PrestaShop,安裝外掛或部署 Worker 來自動化其餘部分。
通常你會立即看到那張圖片的容量下降 70 到 90 個百分點,並相應地提升你的 Core Web Vitals。
重點整理
- Cloudflare Images 將儲存、最佳化和全球傳遞集於一個產品,且沒有輸出費用
- 定價簡單且可預測:每月每 100,000 張儲存 5 美元,每 100,000 張傳遞 1 美元
- 單純的 CDN 只快取你的位元組;Cloudflare Images 會主動調整尺寸、轉換和壓縮它們
- 你可以將原圖存入 Images,或轉換已經託管在 R2 或你伺服器上的圖片
- 轉換現在在免費方案中也可用(每月最多 5,000 次唯一),不再僅限 Pro
- WordPress 和 PrestaShop 使用者可以用我的免費外掛和 Worker 自動化每一張圖片
常見問題
Cloudflare Images 免費嗎? 圖片轉換在免費方案中每月最多可用 5,000 次唯一轉換。透過 Cloudflare Images 產品儲存和傳遞圖片是付費的,每月每 100,000 張儲存圖片 5 美元、每 100,000 張傳遞圖片 1 美元,沒有輸出費用。
Cloudflare Images 會自動轉換為 WebP 和 AVIF 嗎? 會。當瀏覽器請求一張圖片時,Cloudflare 會偵測其支援的格式並傳遞最高效的格式,通常是 AVIF 或 WebP,並對較舊的瀏覽器回退到原始格式。你無需自己產生這些版本。
我可以將 Cloudflare Images 與儲存在 R2 中的圖片一起使用嗎? 可以。你可以將原圖儲存在 Cloudflare R2 中,並使用 Cloudflare 的圖片轉換在傳遞時最佳化它們,而無需在 Images 中儲存第二份副本。R2 沒有輸出費用,使其成為大型媒體庫具有成本效益的來源站。
我還需要 Pro 方案來調整圖片尺寸嗎? 不需要。這一點已經改變:圖片轉換現在在免費方案中每月最多可用 5,000 次唯一轉換。更大的用量和平台內儲存則在付費方案中計費。
Cloudflare Images 與 Cloudinary 相比如何? 兩者都提供自動格式轉換和全球傳遞。主要區別在於定價模型。Cloudflare Images 收取簡單的儲存加傳遞費用,沒有輸出費用,而 Cloudinary 使用綁定的點數模型,隨著流量增長更難預測。
它能在 WordPress 和 PrestaShop 上執行嗎? 能。使用我的免費 WordPress 外掛進行快速設定,或部署我的 Cloudflare Worker 以實現完整涵蓋,連 CSS 中的圖片也一併重寫。我為兩個平台都寫了完整的逐步指南。
評論