圖片幾乎總是網頁中最重的部分,而你託管它們的方式決定了網站給人的感覺是即時還是遲緩。到了 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> 是你定義一次的具名轉換集合(例如 thumbnailhero1200x675)。你也可以啟用彈性變體,直接在 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,0000.50 美元 / 月
輸出頻寬0 美元(免費)

一個計算範例讓它變得具體。假設你經營一家擁有 10,000 張產品圖片的商店,並在一個月內傳遞 500,000 次圖片瀏覽。儲存費用為 0.50 美元(10,000 張儲存),傳遞費用為 5 美元(500,000 張傳遞),那個月合計約 5.50 美元。沒有單獨的頻寬帳單,沒有按次調整尺寸的費用,也沒有按格式的附加費。

把它與典型的託管圖片服務相比,後者的頻寬和轉換次數可能主導帳單,吸引力便顯而易見:你可以在投入之前預測成本。

Cloudflare Images 比較 Cloudinary 比較自行架設

標準Cloudflare ImagesCloudinary自行架設 + 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 在上傳和最佳化你的圖片庫方面提供同樣的功能。

今天如何開始

  1. 登入你的 Cloudflare 儀表板,並從側邊欄啟用 Images
  2. 上傳一張測試圖片,或將一個轉換指向既有的圖片 URL。
  3. 為你網站最常用的尺寸建立一兩個變體(variant)(例如一個 hero 和一個縮圖)。
  4. 用新的傳遞 URL 替換網站上的一張圖片,並在 PageSpeed Insights 上進行前後對比測試。
  5. 如果你使用 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 中的圖片也一併重寫。我為兩個平台都寫了完整的逐步指南。