如果 Cloudflare Images 是你圖片棲身之處，那麼 Cloudflare Image Transformations 就是讓它們變快的引擎。它在圖片被請求的那一刻調整尺寸、壓縮並將其轉換為現代格式，只使用你已經擁有的原圖。沒有建置步驟，沒有預先產生的縮圖，沒有把你的儲存弄得雜亂的單獨副本。你在 URL 中請求想要的尺寸和格式，Cloudflare 便在邊緣產生它並快取。
本指南是我關於在 Cloudflare 上託管圖片的概述的實用伴篇。它講解執行轉換的兩種方式、重要的參數、在 2026 年的成本，以及如何在 WordPress 和 PrestaShop 上將這一切自動化。
摘要
- 轉換從單張原圖按需調整尺寸、壓縮並將圖片轉換為 WebP/AVIF
- 兩種方法：簡單的 URL 格式（
/cdn-cgi/image/...）和用於完全控制的 Cloudflare Worker format=auto會根據瀏覽器的支援情況自動提供 AVIF 或 WebP- 定價慷慨：每月前 5,000 次唯一轉換免費，之後每 1,000 次 0.50 美元
- 轉換不再需要 Pro 方案，這相比往年是一項有意義的變化
- 你可以從來源站或 Cloudflare R2 轉換圖片，並用我的免費外掛和 Worker 將這一切自動化
Cloudflare Image Transformations 的運作原理
傳統上，提供響應式圖片意味著預先產生每一種尺寸。你上傳一張照片，你的 CMS 會建立一個縮圖、一個中等版本、一個大版本等等，每個都作為單獨的檔案儲存。這浪費儲存、拖慢上傳，而且仍然永遠無法精確匹配某個裝置所需的確切尺寸。
圖片轉換將這一切翻轉過來。你儲存一張原圖。當訪客的瀏覽器請求某個特定尺寸時，Cloudflare 即時產生該尺寸、最佳化它，並將結果快取在邊緣。下一位需要相同版本的訪客會立即得到快取的副本。你從不自己產生或儲存衍生檔案，然而每台裝置都會收到一張為其螢幕和格式支援量身打造的圖片。
對你的訪客而言的結果：一張 1 MB 的照片以 100 至 200 KB 的 AVIF 形式抵達，尺寸恰好適配其視口，從附近的邊緣位置傳送。
方法 1：透過 URL 格式進行圖片轉換
轉換一張圖片最簡單的方式，是把它的 URL 包裹在你自己區域上的一個特殊路徑中：
1https://example.com/cdn-cgi/image/<options>/<source-image-url>
一個真實範例，將尺寸調整為 800px 寬、將品質設為 75，並自動選擇最佳格式：
1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg
要使用它，請在 Cloudflare 儀表板中為你的區域啟用 Transformations（在 Images 下）。一旦啟用，該區域上的任何圖片只需建構 URL 即可轉換。這是最快的上手方式，且不需要程式碼。
最有用的選項是：
| 選項 | 作用 |
|---|---|
width、height | 以像素計的目標尺寸 |
fit | 如何適配框：scale-down、contain、cover、crop、pad |
quality | 壓縮等級，1 到 100（75 是合理的預設值） |
format=auto | 在支援時提供 AVIF/WebP，否則提供原始格式 |
gravity | 裁切時的焦點（例如 auto、face 或座標） |
dpr | 用於視網膜顯示器的裝置像素比 |
sharpen、blur | 可選的後處理效果 |
方法 2：透過 Cloudflare Worker 進行圖片轉換
要實現真正的控制，你在 Cloudflare Worker
內部使用 fetch 請求上的 cf.image 屬性進行轉換。這讓你能夠套用邏輯：根據裝置選擇尺寸、限制哪些圖片可被轉換，或重寫整個頁面的圖片連結。
1export default {
2 async fetch(request) {
3 const options = {
4 cf: {
5 image: {
6 width: 800,
7 quality: 75,
8 format: "auto",
9 fit: "scale-down",
10 },
11 },
12 };
13
14 // The image you want to transform
15 const imageURL = "https://example.com/uploads/photo.jpg";
16 return fetch(imageURL, options);
17 },
18};
Worker 方式正是驅動我自己工具的方式，因為它能重寫一個站台的最終 HTML 輸出，包括由佈景主題、外掛甚至內嵌 CSS 注入的圖片，而僅靠 URL 的方式自身無法觸及這些。如果你想更廣泛地學習 Workers，官方 Workers 文件 是一個絕佳的起點。
從 R2 或遠端來源轉換圖片
你並不侷限於同一區域上的圖片。轉換可以從遠端來源站拉取，這使它們成為 Cloudflare R2 物件儲存的完美搭檔。將你的原圖儲存在 R2 儲存桶中，在傳遞時轉換它們，並且無需為輸出付費，因為 R2 不收取輸出費用。我在 在 Cloudflare R2 上託管圖片 的指南中詳細講解了這一具體模式。
轉換不在你自己區域上的圖片時，記得在你的轉換設定中允許該來源網域，否則 Cloudflare 會拒絕擷取它們。
Cloudflare Image Transformations 定價
這裡的經濟性很友善，尤其對中小型站台而言。根據 2026 年的官方 Images 定價 ：
| 級距 | 費用 |
|---|---|
| 每月前 5,000 次唯一轉換 | 免費 |
| 超過 5,000 次 | 每 1,000 次唯一轉換 0.50 美元 |
| 輸出頻寬 | 0 美元（免費） |
「唯一轉換」是指在一個月內套用於一張原圖的一種獨特的選項組合。將某張照片的同一 width=800,format=auto 版本請求一千次，仍只算作一次唯一轉換，因為其餘 999 次由快取提供。這就是為什麼即使在繁忙的站台上，真實的轉換次數也保持很低：你擁有的獨特圖片與尺寸組合，遠少於你的頁面瀏覽量。
值得重申的重大變化：轉換以前位於付費的 Pro 方案之後。現在它們在免費方案中也可用，直至那每月 5,000 次的額度。對於一個小型部落格或作品集，即時圖片最佳化如今實際上是免費的。
在 WordPress 和 PrestaShop 上自動化
手動建構轉換 URL 對於少量圖片還行，但真實的站台有數百張，而且它們是動態產生的。那是難點所在，也正是我的免費工具所解決的。
- WordPress 外掛。 我的 Cloudflare Image Resizing 外掛 （GitHub ）會重寫你的圖片連結，使它們自動經過轉換。
- Cloudflare Worker。 我的 Cloudflare Image Resizing Worker 重寫最終的 HTML 以實現完整涵蓋，包括外掛和佈景主題注入的圖片以及在 CSS 中參照的圖片。
要取得完整的、可複製貼上的逐步說明，請閱讀 針對 WordPress 的 Cloudflare Image Resizing 和 針對 PrestaShop 的 Cloudflare Image Resizing 。在外掛和 Worker 之間，你站台上的每一張圖片最終都會被最佳化，而你無需觸碰任何一個範本。
如果你更願意直接透過 Cloudflare Images 產品儲存和管理你的圖片庫，Easy Cloudflare Images 是我在 Windows、macOS 和 Linux 上用於上傳和最佳化圖片的免費桌面應用程式。
一個快速的前後對比測試
判斷任何最佳化的誠實方式就是去測量它。
- 選一個圖片密集的頁面，將它放到 PageSpeed Insights 上跑一遍。記下 Largest Contentful Paint 和圖片總重量。
- 啟用轉換，並對該頁面的圖片套用
width和format=auto（透過 URL 方法、Worker 或我的外掛）。 - 重新執行測試。你應該會看到圖片載荷急劇下降、LCP 改善，往往把一個不及格的分數移入綠色。
那種可測量的改善，正是往往能在使用者體驗和搜尋排名兩方面起作用的東西。
重點整理
- Cloudflare Image Transformations 從單張原圖按需產生經過最佳化、尺寸正確的圖片
- URL 方法（
/cdn-cgi/image/...）是最快的起步；Worker 給你完整的程式化控制 format=auto替你處理 AVIF/WebP 協商，並為較舊的瀏覽器提供安全的回退- 每月前 5,000 次唯一轉換免費，之後每 1,000 次 0.50 美元，且沒有輸出費用
- 轉換現在在免費方案上即可執行，無需 Pro 訂閱
- 將轉換與 R2 搭配，打造一個零輸出的媒體庫，並用我的外掛和 Worker 將一切自動化
常見問題
Cloudflare Images 與 Image Transformations 有什麼區別？ Cloudflare Images 是更寬泛的產品，負責儲存、最佳化和傳遞圖片。Image Transformations 是其中的調整尺寸與最佳化能力。你可以對儲存在 Cloudflare Images、R2 或你自己來源站上的圖片使用轉換，而不一定要將它們存入 Images 產品。
使用圖片轉換需要付費方案嗎？ 不需要，已經不再如此。轉換在免費方案中每月最多 5,000 次唯一轉換可用。超過之後，你每 1,000 次支付 0.50 美元，並且沒有輸出費用。
format=auto 有什麼作用？ 它告訴 Cloudflare 檢查瀏覽器的 Accept 標頭，並提供其支援的最高效格式，通常是 AVIF 或 WebP，並為不支援現代格式的瀏覽器回退到原始格式（如 JPEG 或 PNG）。
我可以轉換不託管在 Cloudflare 上的圖片嗎？ 可以。只要你在轉換設定中允許該來源，轉換就可以從遠端來源站擷取，包括一個 Cloudflare R2 儲存桶或一個外部伺服器。
計費上什麼算作一次唯一轉換？ 在一個計費月內套用於一張原圖的一種獨特的選項組合。對同一已轉換版本的重複請求由快取提供，並只計一次，這使真實成本保持很低。
如何在整個 WordPress 或 PrestaShop 站台上套用這一點？ 使用我的免費 WordPress 外掛進行快速的自動化設定，或部署我的 Cloudflare Worker 以實現完整涵蓋，重寫每一個圖片連結，包括 CSS 中的那些。兩者都在我的逐步平台指南中有文件記錄。
評論