跳转到内容
搜索文档

创建转换流程

最后更新 查看 MarkdownAgent 设置

定义自动规则以优化远程图像,无需编写任何代码或更改现有 URL。

Flows 让您自动对 zone 上的请求应用图像优化。

每个 flow 将一组条件触发器(例如,图像是 JPEG 或 PNG)与优化参数(例如,转码为 AVIF)配对。

当图像请求匹配 flow 时,Cloudflare 透明地通过 Images 服务重写它并提供优化结果。

Flow 类型

您可以使用预构建的 flow 来处理从其他图像优化服务(如 Fastly)的迁移,或创建自己的自定义 flow。

Provider flow 是一个转换层,将来自其他图像优化服务的图像 URL 映射到 Cloudflare。您现有的 URL(包括特定于 provider 的参数)无需任何更改即可继续工作。

目前,Cloudflare 支持 Fastly Image Optimizer 的 flow。启用后,Cloudflare 自动将 Fastly 的参数转换为其 Cloudflare 等效参数。例如:

  • Fastly 的 brightness 参数接受 -100100 的范围,而 Cloudflare 的 brightness 作为乘数工作。值会相应缩放。
  • Fastly 的 orient 参数映射到 Cloudflare 的 fliprotate 参数。

Custom flow 让您为图像优化定义自己的条件和操作。

这非常适合您想广泛一致地优化图像的情况,例如:

  • 自动格式转换 — 将整个网站的所有图像转码为 AVIF 或 WebP 等现代格式。
  • 响应式尺寸 — 根据每个用户的设备自动调整图像大小。
  • 基于目录的优化 — 对特定路径中的所有图像强制一致的大小,例如路径包含 /thumbnail 的图像为 100x100。

Flow 的工作原理

设置 flow 之前,请确保在 Cloudflare 仪表板Images(图像) > Transformations(变换) 下为您的 zone 启用了转换。

当 zone 上请求图像时,Cloudflare 检查请求是否匹配任何已配置 flow 的条件:

  • Flow 按仪表板中出现的顺序从上到下评估。
  • 如果请求匹配多个 flow,则只有第一个匹配的 flow 会运行。
  • 如果没有 flow 匹配,则请求未经修改直接传递到源站。
  • 要控制优先级,您可以在仪表板中重新排序 flow。

如果请求匹配 flow 的条件,则 Cloudflare 重写 URL 以通过 Images 服务传递并应用指定参数:

  • Custom flow 仅对支持的图像扩展名的请求触发。HTML 页面、CSS 文件和其他非图像永远不会受影响。
  • Provider flow 根据特定于 provider 的优化参数评估请求。例如,Fastly provider flow 仅在请求包含 ?width?height?fit 等参数时触发。Cloudflare 将忽略任何无法识别的参数。

在请求生命周期中,flow 在标准 HTTP 重定向规则之后评估:

  • 任何现有的 URL 重写或重定向规则将在 Images 评估请求之前应用,这可能影响匹配行为。
  • Flow 包含内置的循环预防。如果请求已来自 Images 服务,则 flow 不会在该子请求上重新触发。

设置 provider flow

目前,Cloudflare 支持处理从 Fastly Image Optimizer 迁移的 flow。

要添加 provider flow:

  1. 登录 Cloudflare 仪表板 并选择您的账户。
  2. 转到 Images(图像) > Transformations(变换) 并选择您的 zone。
  3. 选择 Automation(自动化) 标签,然后选择 Add provider flow(添加提供商流程)
  4. 选择 Fastly 作为 provider。
  5. Save(保存) 您的 flow。

设置 custom flow

1. 创建新 flow

在 Cloudflare 仪表板中,转到 Images(图像) > Transformations(变换) 并选择要设置 custom flow 的 zone。

转到 Automation(自动化) 标签并选择 Add custom flow(添加自定义流程) 以打开侧边面板,您可以在其中配置 flow。

自定义流配置面板

2. 配置条件

当传入请求匹配 flow 中所有配置的条件时,custom flow 被触发:

  • File extension(文件扩展名) — 匹配所有图像格式或仅特定文件扩展名(如 JPEG、PNG 或 WebP)的请求。
  • URL path(URL 路径) — 匹配 URL 路径与指定模式(如 /images/*/assets/thumbnails/*)的请求。
  • Query parameter(查询参数) — 匹配查询字符串包含指定参数(如 orient)的请求。

3. 配置操作

接下来,定义 flow 触发时应应用的优化参数。

您可以在单个 flow 中应用多个操作。有关可用参数的完整列表,请参阅功能

大多数用例的关键参数是:

format | f

设置 format=auto 以自动为每个请求浏览器提供最高效的格式(例如 AVIF、WebP)。

如果浏览器不支持 AVIF,则 Cloudflare 将回退到 WebP 或标准格式。

请参阅 format

quality | q

控制输出图像的压缩质量。接受以下值:

  • 1(低质量,小文件大小)到 100(高质量,大文件大小)的固定值
  • 感知质量级别highmedium-highmedium-lowlow

请参阅 quality

slow-connection-quality | scq

通过 client hints 检测到慢速连接时覆盖 quality。接受与 quality 相同的固定值或感知值。这向慢速网络用户提供较低质量(和较小)的图像,而不影响快速连接的用户。

请参阅 slow-connection-quality

width | w

设置 width=auto 以根据请求设备自动调整图像大小。

Cloudflare 使用 client hints(由浏览器发送)或作为回退的 user-agent 检测来确定最优宽度。

您可以使用以下子参数微调 width=auto 行为:

子参数 描述 默认值
wbreakpoints 覆盖默认断点宽度(像素)(client hints) 320;768;960;1200
wmobile 覆盖移动设备的默认宽度(像素)(user-agent 检测) 768
wdesktop 覆盖桌面设备的默认宽度(像素)(user-agent 检测) 1200

要了解 width=auto 的工作原理,请参阅我们的提供响应式图像指南。

4. 发布 flow

在侧边面板上选择 Save(保存) 以添加 custom flow,然后在 flow 列表上选择 Save(保存) 以启用 flow。

这篇文档对您有帮助吗?