Cloudflare Image Resizing -- On-the-Fly Transformations

In this tutorial, you'll learn about Cloudflare Image Resizing. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

This tutorial covers Cloudflare Image Resizing, a feature that lets you transform images on the fly by adding URL parameters to resize, crop, format-convert, and apply effects at the edge without origin server processing.

Why On-the-Fly Resizing Matters

Traditional image workflows require storing multiple variants of every image (thumbnail, preview, full size) or running a transformation server. Both approaches waste storage or compute resources. Cloudflare Image Resizing eliminates this by transforming images at the edge as they are requested. You store one original and request any size or format via URL parameters. The transformed result is cached at the edge, so subsequent requests are served instantly without re-processing. This approach reduces storage costs by 80 percent or more and eliminates the need for a dedicated image processing server.

Real-world use: DodaZIP generates file preview thumbnails using Cloudflare Image Resizing. When a user uploads a 20MB document screenshot, the platform requests 150px thumbnails via URL parameters. No variant pre-generation is needed, and thumbnails load in under 200ms from the edge cache.

Image Resizing Decision Flow

flowchart TD
  A[Request with URL params] --> B{Cached at edge?}
  B -->|Yes| C[Serve cached variant]
  B -->|No| D[Fetch original from origin]
  D --> E[Apply transformations]
  E --> F[Cache result at edge]
  F --> C
  C --> G[Deliver to browser]
  style B fill:#f90,color:#fff
  style E fill:#f90,color:#fff
  style F fill:#f90,color:#fff

Basic URL Transformations

Image Resizing uses the /cdn-cgi/image/ path prefix followed by comma-separated parameters and the source image URL. The simplest case is resizing to a specific width.

# Resize to 200px width, maintain aspect ratio
https://example.com/cdn-cgi/image/width=200/photo.jpg

# Resize and crop to exact dimensions
https://example.com/cdn-cgi/image/width=400,height=300,fit=crop/photo.jpg

# Expected result: photo.jpg is resized to 400x300 pixels
# and center-cropped to fill the dimensions exactly

The fit parameter controls how the image fits within the specified dimensions. Values include scale-down, contain, cover, crop, and pad. The crop mode ensures the image fills the exact dimensions by cropping the excess.

Format Conversion and Quality Control

You can convert images to modern formats like WebP and AVIF while controlling compression quality. This reduces file size significantly without visible quality loss.

# Convert to WebP at 80% quality
https://example.com/cdn-cgi/image/format=webp,quality=80/photo.jpg

# Convert to AVIF with auto quality
https://example.com/cdn-cgi/image/format=avif,quality=auto/photo.jpg

# Let Cloudflare choose the best format for the browser
https://example.com/cdn-cgi/image/format=auto/photo.jpg

# Expected result: photo.jpg is converted to WebP at 80% quality
# File size is typically 50-70% smaller than the original JPEG

The format=auto setting inspects the browser Accept header and delivers WebP to compatible browsers, AVIF to those that support it, and falls back to JPEG for older browsers. This requires no client-side detection code.

Focal Point and Cropping

For images with important subjects, you can set a focal point to ensure the crop preserves the right area. This prevents heads or products from being cut off.

# Crop with focal point (center of interest)
https://example.com/cdn-cgi/image/width=300,height=300,fit=crop,
  gravity=0.5x0.3/photo.jpg

# The gravity parameter takes x,y coordinates as decimals
# 0.5x0.3 means 50% from left, 30% from top
# For a face centered horizontally but in the top third:
# gravity=0.5x0.25

# Expected result: 300x300 crop centered on the focal point
# If the subject is at the top of the image,
# the crop preserves that area instead of center-cropping

The gravity parameter accepts values in the range 0.0 to 1.0 for both x and y axes. You can also use named gravity values like north, south, east, west, center, or combinations like northwest.

Advanced Sharpening and Effects

Image Resizing supports additional image processing parameters for sharpening, blur, contrast, and brightness adjustments.

# Sharpen and resize product photo
https://example.com/cdn-cgi/image/width=800,sharpen=2.0,quality=85,format=webp/photo.jpg

# Expected result: 800px wide WebP image with sharpening applied
# sharpen value range: 0.0 (none) to 10.0 (maximum)
# Typical values: 0.5 (subtle) to 3.0 (strong)

# Compare original vs resized image sizes
curl -sI "https://example.com/photo.jpg" | grep -i content-length
# Expected: content-length: 240000 (240KB original)

curl -sI "https://example.com/cdn-cgi/image/width=800,format=webp,quality=80/photo.jpg" | grep -i content-length
# Expected: content-length: 34000 (34KB - 86% smaller)

The sharpen parameter is particularly useful for product photos and screenshots where text clarity matters. A value of 1.0 to 2.0 provides visible improvement without introducing artifacts.

FAQ

Practice Questions

1. What URL parameter would you use to convert an image to AVIF format while maintaining aspect ratio at 600px width?
2. How does the gravity parameter affect cropping behavior in Image Resizing?
3. Why is the sharpen parameter useful for product photography?

Summary

Cloudflare Image Resizing transforms images on the fly at the edge using URL parameters. You can resize, crop, convert formats, adjust quality, apply sharpening, and control focal points -- all without storing multiple variants or running a processing server. Transformed images are cached at the edge, ensuring fast subsequent loads. This reduces storage costs, eliminates transformation infrastructure, and simplifies image delivery workflows.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro -- security-first tools for the modern web.