logo
English

导航菜单

Cloudflare Foundations

Cloudflare Image Resizing

Cloudflare Image Resizing illustration

Scenario

Imagine an e-commerce site:

  • The product list shows a thumbnail for each item — call it Image A.
  • The product detail page shows several photos, including Image A.

Image A lives at: https://example.com/images/product-12345.jpg

Traditional approach

Use the same file everywhere:

<img src="https://example.com/images/product-12345.jpg" alt="Product thumbnail">
<img src="https://example.com/images/product-12345.jpg" alt="Product detail">

What goes wrong

  • Wrong size for the context: thumbnails should be tiny, detail pages need more pixels. Serving the same large file everywhere slows down the list view.
  • No quality tuning: detail views need higher quality; thumbnails can be compressed more to save bandwidth.

A quick fix (but not great)

Ship two files instead:

<img src="https://example.com/images/product-12345-thumbnail.jpg" alt="Product thumbnail">
<img src="https://example.com/images/product-12345.jpg" alt="Product detail">

Still not enough

If the detail image is 800x800, loading that on a small phone is wasteful—400x400 would look fine and save bandwidth.

That means creating multiple sizes for many devices… and maintaining a pile of variants for thousands of products. Painful.

The ideal

Upload a single high-quality original, then generate the right size/quality/format on demand via URL parameters.

For example:

  • Original: https://example.com/images/product-12345.jpg
  • 150x150 thumb: https://example.com/cdn-cgi/image/width=150,height=150,quality=75,fit=cover,format=auto/images/product-12345.jpg

Bonus wishes:

  • Serve WebP or AVIF when the browser supports it.
  • Use lower quality for thumbnails (e.g., 75) to save bytes.

Cloudflare Image Resizing

Cloudflare’s real-time image optimization service lets you resize, compress, and change formats with simple URL parameters—no image pipeline to manage.

Basic usage

URL format

https://your-domain.com/cdn-cgi/image/[params]/[original-image-path]

Minimal example

Original

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

Optimized

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

Core parameters

Size

# Width only
width=800

# Height only
height=600

# Width + height
width=800,height=600

Quality

# Range: 1-100
quality=85    # Recommended: 80-90
quality=75    # Lower for mobile
quality=95    # High-quality cases

Format

format=auto   # Pick the best format (recommended)
format=webp   # Force WebP
format=avif   # Force AVIF  
format=jpeg   # Force JPEG

Fit modes

fit=scale-down  # Default; shrink but never upscale
fit=contain     # Keep aspect ratio, may letterbox
fit=cover       # Crop to fill the box
fit=crop        # Hard crop to size
fit=pad         # Pad with background

Real-world patterns

Pattern 1: Responsive images

Serve the right size per device:

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

Pattern 2: Product imagery

const productImageUrls = {
  // Thumbnail
  thumbnail: `/cdn-cgi/image/width=150,height=150,quality=75,fit=cover,format=auto/products/${productId}.jpg`,
  
  // Listing
  listing: `/cdn-cgi/image/width=300,height=300,quality=80,fit=cover,format=auto/products/${productId}.jpg`,
  
  // Detail
  detail: `/cdn-cgi/image/width=600,height=600,quality=90,fit=contain,format=auto/products/${productId}.jpg`,
  
  // Zoom
  zoom: `/cdn-cgi/image/width=1200,height=1200,quality=95,fit=contain,format=auto/products/${productId}.jpg`
};

Pattern 3: CMS content

function generateImageVariants(originalPath) {
  const baseUrl = `/cdn-cgi/image`;
  
  return {
    // Post thumbnail
    thumbnail: `${baseUrl}/width=200,height=150,quality=75,fit=cover,format=auto/${originalPath}`,
    
    // In-article image
    content: `${baseUrl}/width=800,quality=85,format=auto/${originalPath}`,
    
    // Social share
    social: `${baseUrl}/width=1200,height=630,quality=90,fit=cover,format=auto/${originalPath}`,
    
    // Mobile-optimized
    mobile: `${baseUrl}/width=400,quality=75,format=webp/${originalPath}`
  };
}

Learn more

There’s much more you can do. Check the docs for advanced options:

Cloudflare Images docs

NextSmart PlacementLearn Smart Placement for Cloudflare Workers to auto-optimize where your code runs and cut latency.

搜索