logo
简体中文

导航菜单

Cloudflare 入门

Cloudflare Image Resizing

Cloudflare Image Resizing 示意图

场景

对于某个网站，有这样的页面：

  • 商品列表，每个商品有一个缩略图，这个缩略图叫做：图片A
  • 商品详情页，有多张商品图片，包括了图片A

图片A的地址是：https://example.com/images/product-12345.jpg

传统做法

对于商品缩略图和详情页图片，传统做法是两个场景使用共同的图片：

<img src="https://example.com/images/product-12345.jpg" alt="商品缩略图">
<img src="https://example.com/images/product-12345.jpg" alt="商品详情图">

分析问题

这种做法存在以下问题：

  • 尺寸不匹配：缩略图通常需要较小尺寸，而详情页需要更大尺寸。使用同一张图片会导致缩略图加载过大，影响性能。
  • 图片未压缩：详情页图片通常需要高质量，而缩略图可以适当压缩以节省带宽。使用同一张图片无法满足不同质量需求。

解决问题

解决问题的办法也很简单，准备两张图片即可：

<img src="https://example.com/images/product-12345-thumbnail.jpg" alt="商品缩略图">
<img src="https://example.com/images/product-12345.jpg" alt="商品详情图">

还有问题

详情页图片是 800x800。如果在小屏幕设备上，我们也要加载 800x800 的图片吗？这显然是不合理的，因为加载 400x400 的图片已经足够清晰了，加载那么大的图片只会浪费带宽和流量。

所以对于不同设备，我们还需要准备不同尺寸的图片…

这样岂不是要维护很多张图片吗？对于一个电商网站来说，可能有成千上万的商品，每个商品都需要多张不同尺寸的图片，这样的工作量是非常庞大的。

理想的解决方案

理想的解决方案是：只上传一张高质量的原始图片，然后根据不同的需求，动态生成不同尺寸、不同质量、不同格式的图片。

我希望这样：

  • 我上传一张原始图片，它很高清，尺寸足够大
  • 当我需要一张 150x150 的缩略图时，我只需要一个 URL，就能得到这张图片

例如：

  • 原始图片的地址是： https://example.com/images/product-12345.jpg
  • 150x150 缩略图的地址是： https://example.com/cdn-cgi/image/width=150,height=150,quality=75,fit=cover,format=auto/images/product-12345.jpg

还有格式也能自动处理就好了：

  • 如果浏览器支持 WebP，就返回 WebP 格式
  • 如果浏览器支持 AVIF，就返回 AVIF 格式

还能自动压缩就更好了：

  • 对于缩略图，质量可以设置低一些，比如 75

Cloudflare Image Resizing

Cloudflare 提供的实时图片优化服务，通过简单的 URL 参数即可对图片进行动态调整、压缩和格式转换。它是现代 Web 应用图片优化的完美解决方案。

基础用法

URL 格式

https://your-domain.com/cdn-cgi/image/[参数]/[原图片路径]

基本示例

原始图片：

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

优化后：

https://example.com/cdn-cgi/image/width=800,quality=85,format=auto/images/photo.jpg

核心参数详解

尺寸控制

# 指定宽度
width=800

# 指定高度  
height=600

# 同时指定宽高
width=800,height=600

质量控制

# 质量范围：1-100
quality=85    # 推荐值：80-90
quality=75    # 移动端可用更低质量
quality=95    # 高质量场景

格式转换

format=auto   # 自动选择最佳格式（推荐）
format=webp   # 强制 WebP 格式
format=avif   # 强制 AVIF 格式  
format=jpeg   # 强制 JPEG 格式

适配模式

fit=scale-down  # 缩小（默认，不会放大）
fit=contain     # 包含（保持比例，可能有空白）
fit=cover       # 覆盖（裁剪以填满）
fit=crop        # 裁剪到指定尺寸
fit=pad         # 填充（添加背景色）

实际应用场景

场景 1：响应式图片

为不同设备提供不同尺寸的图片：

<picture>
  <!-- 桌面端 -->
  <source media="(min-width: 1024px)" 
          srcset="https://example.com/cdn-cgi/image/width=1200,quality=90,format=auto/hero.jpg">
  
  <!-- 平板 -->
  <source media="(min-width: 768px)" 
          srcset="https://example.com/cdn-cgi/image/width=800,quality=85,format=auto/hero.jpg">
  
  <!-- 移动端 -->
  <img src="https://example.com/cdn-cgi/image/width=400,quality=80,format=auto/hero.jpg" 
       alt="Hero Image">
</picture>

场景 2：产品图片优化

电商网站的产品图片：

const productImageUrls = {
  // 缩略图
  thumbnail: `/cdn-cgi/image/width=150,height=150,quality=75,fit=cover,format=auto/products/${productId}.jpg`,
  
  // 列表页
  listing: `/cdn-cgi/image/width=300,height=300,quality=80,fit=cover,format=auto/products/${productId}.jpg`,
  
  // 详情页
  detail: `/cdn-cgi/image/width=600,height=600,quality=90,fit=contain,format=auto/products/${productId}.jpg`,
  
  // 放大镜
  zoom: `/cdn-cgi/image/width=1200,height=1200,quality=95,fit=contain,format=auto/products/${productId}.jpg`
};

场景 3：内容管理系统

博客或 CMS 的图片处理：

function generateImageVariants(originalPath) {
  const baseUrl = `/cdn-cgi/image`;
  
  return {
    // 文章缩略图
    thumbnail: `${baseUrl}/width=200,height=150,quality=75,fit=cover,format=auto/${originalPath}`,
    
    // 文章内图片
    content: `${baseUrl}/width=800,quality=85,format=auto/${originalPath}`,
    
    // 社交分享图
    social: `${baseUrl}/width=1200,height=630,quality=90,fit=cover,format=auto/${originalPath}`,
    
    // 移动端优化
    mobile: `${baseUrl}/width=400,quality=75,format=webp/${originalPath}`
  };
}

进一步了解

其功能绝不像我们介绍的那样简单，如需了解更多高级功能和配置，请参考官方文档：

Cloudflare Images 官方文档

搜索