如果 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 中的那些。两者都在我的分步平台指南中有文档记录。
评论