Cloudflare Images 推出 AVIF、Blur 和 Bundle with Stream

两个月前，我们全面推出了 Cloudflare Images，采用情况和我们收到的反馈令人感到惊讶。

让我们先看一些数据：

在 11 月 5 日至 12 日这一周内，平均每天传送了超过 7000 万张图像。

至今为止上传了超过 150 万张图像，且上传数量每天都在增加。

但我们才刚刚开始，且很开心地宣布推出大家最为渴望的功能。首先我们将谈论对 Images 的 AVIF 支持，使用 AVIF 转换尽可能多的图像，从而在不影响质量的情况下生成高度压缩、快速交付的图像。

其次，我们引入了“模糊”。通过模糊图像，并结合原本已经支持的通过签名 URL 保护私人图像的功能，Cloudflare Images 已成功提供付费内容预览的最佳解决方案。

对于许多客户来说，能够从他们自己的域而不是仅通过 imagedelivery.net 来服务 Images 十分重要。下面，我们将展示使用自定义 Worker 或特殊 URL 实现此目的的一个简单解决方案。

最后一件同样重要的事情是，我们宣布为 Cloudflare Images 和 Stream 推出有吸引力的新价格套餐。

去年，我们已经宣布在 Image Resizing 产品中支持新的 AVIF 图像格式。

上个月，我们在 Cloudflare Images 中添加了 AVIF 支持。它压缩图像的效果比 WebP 和 JPEG 之类的旧版格式要好得多。如今，Chrome 和 Firefox 中都已支持 AVIF 图像格式。在全球范围内，将近 70% 的用户拥有支持 AVIF 的 Web 浏览器。

正如我们之前所解释的那样，AVIF 是 HEIF ISO 标准以及 Mozilla、Xiph、Google、Cisco 和许多其他公司的免版税 AV1 编码解码器的组合。

“目前，JPEG 是 Web 上最常用的图像格式。就它的使用时长而言，它做得非常好，而且由于其出色的兼容性，它在未来几年内极有可能保持常用。在取代 JPEG 方面曾做过许多尝试，例如 JPEG 2000、JPEG XR 和 WebP。然而，这些格式仅提供少量的压缩改进，且在图像质量上始终比不上 JPEG。AVIF 的压缩和图像质量都远远高于所有这些格式。”1

提醒一下，图像交付通过 Cloudflare 管理的 imagedelivery.net 域来完成。它由 Cloudflare Workers 提供支持。我们使用以下逻辑来请求基于 Accept HTTP 请求标头的 AVIF 格式：

基于 Accept 标头，Worker 中的逻辑会检测是否可提供 WebP 或 AVIF 格式。请求会传递到 Image Resizing。如果图像在 Cloudflare 缓存中可用，则会立即提供图像，否则会重新调整图像大小、转换图像并缓存。此方法可确保为不支持 AVIF 格式的客户端提供 WebP 或 JPEG 格式的图像。

const WEBP_ACCEPT_HEADER = /image\/webp/i;
const AVIF_ACCEPT_HEADER = /image\/avif/i;

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event));
});

async function handleRequest(event) {
  const request = event.request;
  const url = new URL(request.url);
  
  const headers = new Headers(request.headers);

  const accept = headers.get("accept");

  let format = undefined;

  if (WEBP_ACCEPT_HEADER.test(accept)) {
    format = "webp";
  }

  if (AVIF_ACCEPT_HEADER.test(accept)) {
    format = "avif";
  }

  const resizingReq = new Request(url, {
    headers,
    cf: {
      image: { ..., format },
    },
  });

  return fetch(resizingReq);
}

Cloudflare Images 产品的好处是，我们添加了 AVIF 支持，而客户方无需更改哪怕一行代码。

将图像转换为 AVIF 是计算密集型，但在文件大小方面会带来显著的好处。在决定提供哪种格式时，我们始终会权衡成本和利益。

值得注意的是，目前所有的 WebP 和 AVIF 格式转换都在图像交付的请求阶段发生。未来我们将添加在上传阶段转换图像的功能。

对于 Images 和 Image Resizing，呼声最高的一个功能就是添加模糊支持。我们最近通过 URL 格式和 Cloudflare Workers 添加了模糊支持。

Cloudflare Images 使用变体。当您创建一个变体时，您可以定义属性，包括变体名称、宽度、高度以及该变体是否可公开访问。模糊将通过 variant API 作为变体的新选项提供：

在 Cloudflare Images 中使用模糊功能的一个使用案例是控制对高级内容的访问。

curl -X POST "https://api.cloudflare.com/client/v4/accounts/9a7806061c88ada191ed06f989cc3dac/images/v1/variants" \
     -H "Authorization: Bearer <api_token>" \
     -H "Content-Type: application/json" \
     --data '{"id":"blur","options":{"metadata":"none","blur":20},"neverRequireSignedURLs":true}'

客户将上传需要访问令牌的图像：

使用我们通过 API 定义的变体，我们可以提取图像而无需提供签名：

curl -X POST "https://api.cloudflare.com/client/v4/accounts/9a7806061c88ada191ed06f989cc3dac/images/v1" \
     -H "Authorization: Bearer <api_token>"
     --form 'file=@./<file_name>' \
     --form 'requireSignedURLs=true'

要访问受保护的图像，将需要有效的签名 URL：

Cloudflare 大厅中的熔岩灯。由 @mahtin 免费提供

Lava lamps in the Cloudflare lobby. Courtesy of @mahtin

图像模糊和限制访问图像的组合可以集成到许多场景中，为内容发布者提供强大的工具集。

Cloudflare 仪表板中很快将提供定义变体的功能和模糊选项。

Cloudflare Images 客户的一个重要使用案例是从自定义域提供图像。它可以改善延迟和加载性能，而无需在客户端进行额外的 TLS 协商。使用 Cloudflare Workers，客户可以根据以下示例立即添加此功能：

const IMAGE_DELIVERY_HOST = "https://imagedelivery.net";

addEventListener("fetch", async (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const { pathname, search } = url;

  const destinationURL = IMAGE_DELIVERY_HOST + pathname + search;
  return fetch(new Request(destinationURL));
}

为简单起见，Workers 脚本从其部署的域重定向到 imagedelivery.net。我们假设格式与用于 Cloudflare Images URL 的格式相同：

https://<customdomain.net>/<encoded account id>/<image id>/<variant name>

可以调整 Worker 以满足客户需求，例如：

• 从特定的域路径提供图像（如/images/）

• 自动填入帐户 ID 或变体名称

• 将 Cloudflare Images 完全映射到自定义 URL

对于仅想要在 Cloudflare 上从他们的域提供 Cloudflare Images 的客户，我们将添加使用以下格式提供 Cloudflare Images 的功能：

https://<customdomain.net>/cdn-cgi/imagedelivery/<encrypted_account_id>/<_image_id>/<variant_name>

对于激活 Cloudflare Images 订阅的 Cloudflare 帐户，其下所有客户域都将支持图像交付。此功能将在假日之前对所有 Cloudflare Images 客户可用。

Creator 平台、电子商务和许多其他产品都有一个共同之处：拥有简单且可访问的方式，以最佳且最实惠的方式上传、存储和交付图像和视频是至关重要的。

我们与 Stream 团队合作，创建一组捆绑包，让客户可超级轻松地开始使用您的产品。

Starter 捆绑包是完美的试验品，也是第一个 MVP。每个月仅需 $10，比未捆绑的选项便宜 50%，同时包含足以入门的使用量：

• Stream：可存储 1,000 分钟并提供 5,000 分钟

• Images：可存储 100,000 张图像，并提供 500,000 张图像

对于更大且快速扩展的应用程序，我们提供 $50 一个月的 Creator 捆绑包，相比未捆绑的产品可节省超过 60%。它包括开始扩展所需的全部内容：

• Stream：可存储 10,000 分钟并提供 50,000 分钟

• Images：可存储 500,000 张图像，并提供 1,000,000 张图像

这些新捆绑包将从 11 月底向所有客户提供。

我们不会止步于此，接下来将为 Images 推出的功能已经在准备之中。其中一个就是 Images Analytics。拥有卓越的分析对产品十分关键，因此我们将为 Cloudflare Images 的所有客户引入分析功能，以便保持跟踪所有图像和使用情况。

---

1/generate-avif-images-with-image-resizing/#what-is-avif