图像大小调整

隆重宣布 Image Resizing

Cloudflare 隆重推出 Image Resizing，为其图像优化套件增加了另一款重要产品。该产品允许客户对图像执行一系列丰富的重要操作。

调整大小 — 源图像将被调整到指定的高度和宽度。该操作允许为每个特定用途创建多个不同大小的变体。

裁剪 — 源图像将被调整到一个不同于原长宽比的大小，图像的部分将被移除。对于必须通过保留图像的一部分来实现不同格式的大头照和产品图像，这个功能特别有用。

压缩 — 通过应用有损压缩来减少源图像的文件大小。在可接受以轻微质量损失来换取更小的文件大小时，可使用这一方法。

转换为 [WebP](https://en.wikipedia.org/wiki/WebP) — 在用户浏览器支持时，将源图像转换为 WebP 格式。交付 WebP 图像能利用这种现代且经过高度优化的图像格式。

通过组合使用以上操作，客户只要在服务器上储存单一高质量图像，然后利用 Image Resizing 来为每个特定的用例创建专门的变体。无需付出任何额外努力，每个变体也将自动受益于 Cloudflare 的全球缓存。

示例

电子商务缩略图

电子商务网站通常储存每个产品的高质量图像。他们需要从这张图像根据产品的展示方式创建不同的变体。一个例子是创建目录视图的缩略图。使用 Image Resizing，如果高质量图像位于这里：

https://example.com/images/shoe123.jpg

这是使用 Image Resizing 展示一张 75x75 像素缩略图的方式：

<img src="/cdn-cgi/image/width=75,height=75/images/shoe123.jpg"/>

响应式图像

在定制一个网站来适应各种设备类型和尺寸时，一个要点是始终使用大小正确的图像。当图像要占据屏幕的特定百分比时，这可能会很困难。要解决这个问题，可以使用 <img srcset sizes>。 如不使用 Image Resizing，就必须创建和储存图像的多个版本。本例中，储存了 hero.jpg 的一个高质量副本，然后使用 Image Resizing 按需调整到特定的大小。

<img width="100%" srcset=" /cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w, /cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w, /cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w, /cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w, /cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w, " src="/cdn-cgi/image/width=960/assets/hero.jpg"/>

在不改变 URL 的情况下执行最大尺寸

Image Resizing 也可在 Cloudflare Worker 内使用。Worker 允许您编写代码并在接近您全球各地用户的地方运行。例如，您可能希望将 Image Resizing 添加到您的图像并保持相同的 URL。您的用户和客户端将能一如既往地使用相同的图像 URL，但图像将以您所需的任何方式透明地修改。

您可以在匹配您的图像 URL 的路由上安装一个 Worker，并调整任何超过某个上限的图像：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return fetch(request, {
    cf: {
      image: {
        width: 800,
        height: 800,
        fit: 'scale-down'
      }
    }
  });
}

由于 Worker 只是代码，您也能轻松在仅带有图像扩展名的 URL 上运行这个 Worker，或甚至只是对交付到移动客户端的图像进行调整。

Cloudflare 与 Images

Cloudflare 在构建图像加速工具方面有着悠久的历史。我们的缓存一直通过在接近用户的位置储存图像副本来减少延迟。[Polish](https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/) 自动化无损和有损图像压缩的选项，从图像中移除不必要的字节。[Mirage](https://www.cloudflare.com/website-optimization/mirage/) 根据设备类型加速图像传输。我们正继续对所有这些工具进行投入，因为它们都在改善网络图像体验方面发挥着独特的作用。

Image Resizing 有所不同的原因在于，这是 Cloudflare 第一个将图像提供方式的全部控制权赋予开发人员的产品。如果您希望预先或在 Cloudflare Worker 内定义图像提供的大小，那么应该选择 Image Resizing。

后续步骤及定价

Image Resizing 今日向 Business 和 Enterprise 客户开放使用。要启用这个功能，请登录到 Cloudflare 仪表板，转到 Speed 选项卡。在这里，您可以看到可一键启用的 Image Resizing 部分。

本产品包含于 Business 和 Enterprise 计划中，无额外费用，提供慷慨的使用限额。Business 客户拥有每月 10 万次请求的上限，每月每增加 10 万次请求收费 10 美元。Enterprise 客户拥有每月 1000 万次请求的上限，更高使用量将享受折扣。请求定义为对包含 Image Resizing 的 URL 的访问，或从 Worker 中调用 Image Resizing。Cloudflare Images

在启用 Image Resizing 后，您就可以开始调整第一个图像的大小了。

1. 使用现有站点，在这里储存图像：

https://yoursite.com/images/yourimage.jpg

2. 使用这个 URL 来调整图像的大小：

https://yoursite.com/cdn-cgi/image/width=100,height=100,quality=75/images/yourimage.jpg

3. 试验改变

width=, height=, and quality=.

以上说明使用 Image Resizing 的默认 URL 格式。有关选项、用例和兼容性的详细信息，请参阅我们的开发人员文档。