Cloudflare Images Solutions

Application Performance
ImagesImage OptimizationImage Storage

Last Updated: December 2025

Solution Overview

Cloudflare offers two distinct approaches for image optimization:

Cloudflare Images

Managed hosting service with Cloudflare-managed backend storage. Upload images to Cloudflare and use it as your image hosting provider.

Best for: New projects, complete image management solution

Image Transformations

Optimization service for images hosted externally (Amazon S3, Cloudflare R2, or any origin server). Transform and resize on-demand.

Best for: Existing image infrastructure, external storage

Cloudflare Images

Key Features

Storage & Upload Options

  • Upload via custom path: Recommended for general use with API integration
  • Batch API upload: Efficient for large quantities of images
  • Direct creator uploads : One-time upload URLs for end-users and clients
  • Dashboard upload: Quick testing and manual uploads
  • Workers upload: Integration with Cloudflare Developer Platform

Delivery Options

  • Image Variants : Create preset configurations for different use cases
  • Flexible Variants : Apply customizable transformation parameters on-demand
  • Private Images : Serve images using signed URL tokens for access control
  • Custom Domains: Serve images from your own domain

URL Format

Standard Domain:

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_NAME>

Custom Domain:

https://example.com/cdn-cgi/imagedelivery/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_NAME>

Dashboard Configuration

Cloudflare Images Dashboard Configuration

Live Examples

Original Image (Public Variant)

Original demo image - public variant
https://imagedelivery.net/2sbFr08YIps0arOTfjTqvQ/315f4dee-cba5-4b44-b12c-b77cccc79a00/public

Preset Variant Example

Preset variant example - contain fit
.../contain

Flexible Variant Example

Flexible variant example - width 250, quality 50, rotated 180 degrees
.../w=250,quality=50,rotate=180

Image Transformations

Transform and optimize images stored on external origin servers (Amazon S3, Cloudflare R2, etc.) without migrating your storage.

Three Transformation Methods

1. Transform via URL

Simple URL-based transformations. Add parameters to your image URLs for on-the-fly optimization.

  • Use width=auto for automatic sizing based on browser/device (Chromium only)
  • Combine with srcset for responsive images
  • Use loading="lazy" or eager loading for mobile optimization

URL Format:

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

2. Transform via Workers

Maximum flexibility with programmatic control. Enables complex transformations including overlays and watermarks .

  • Authentication and access control (Basic Auth, headers, cookies)
  • Conditional logic (user-agent, HTTP method, request.cf properties)
  • Multiple transformations in sequence
  • API automation with tokens, SDKs, or Terraform

3. Transform via Images Binding

Alternative to fetch() for tighter integration with Cloudflare Developer Platform.

Useful for multiple transformations and advanced workflows.

Code Examples

Interactive Transformation Demo

Original Image : 3 MB, 2419w × 3226h px, 72 DPI

View all available options

Transform URL:

Interactive transformation demo showing real-time parameter changes

Advanced Transformation Examples

Background Removal & Zoom

Advanced transformation - foreground segmentation with background removal and zoom
gravity=auto,zoom=0.5,segment=foreground,background=white

How It Works

  • gravity=auto: Automatically detects and focuses on the main subject
  • zoom=0.5: Zooms into the subject at 50% magnification
  • segment=foreground: Separates the foreground subject from background
  • background=white: Replaces the background with white color

Perfect for product photography, profile pictures, and content featuring people or objects.

Responsive Images Demo

Uses srcset to serve different sizes based on viewport:

Responsive image demo automatically adjusting to viewport size

Lazy Loading Demo

Images load only when entering viewport using loading="lazy":

Lazy loaded image example 1
Lazy loaded image example 2
Lazy loaded image example 3

Technical Considerations

Configuration Requirements

Caching & Performance

Alternative Storage Options

For other hosting options beyond Cloudflare Images, explore Cloudflare's storage solutions including R2 Object Storage.

Additional Resources