Cloudflare Image Optimization: Polish, Mirage and Image Resizing — Complete Guide

This tutorial covers Cloudflare's three image optimization features: Polish (automatic compression), Mirage (Lazy Loading and dynamic resizing for mobile), and Image Resizing (on-the-fly transformation via URL parameters). You will learn how to configure each feature and the performance impact of optimized images.

Why Image Optimization Matters

Images account for 50-70% of a typical web page's total weight. Unoptimized images increase page load times, consume bandwidth, and hurt Core Web Vitals scores as measured by CDN edge performance — especially Largest Contentful Paint (LCP). Cloudflare's image optimization features compress, resize, and serve images in modern formats like WebP and AVIF automatically, reducing image sizes by 30-80% without visible quality loss.

Real-world use: Durga Antivirus Pro's dashboard displays real-time threat maps and charts. Cloudflare Polish reduces these image assets by 40% on average, cutting dashboard load time from 4.2s to 1.8s. This directly improved user engagement metrics and reduced bounce rates.

Image Optimization Decision Flow

flowchart TD
  A[Image request arrives] --> B{Polish enabled?}
  B -->|Yes| C["Convert to WebP/AVIF"]
  C --> D{Client supports WebP?}
  D -->|Yes| E[Serve WebP]
  D -->|No| F[Serve original]
  B -->|No| G{Mirage enabled?}
  G -->|Yes| H[Lazy load + resize for viewport]
  G -->|No| I{Resizing requested?}
  I -->|Yes| J[Transform via URL params]
  J --> K[Serve optimized image]
  style C fill:#f90,color:#fff
  style H fill:#f90,color:#fff
  style J fill:#f90,color:#fff

Polish: Automatic Image Compression

Polish automatically compresses images on the fly and serves them in modern formats when the browser supports them.

Configuration Options

| Setting | Description | Quality

# Enable Polish via Cloudflare API
curl -X PATCH "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/polish" \
  -H "Authorization: Bearer API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"value":"lossy"}'
# Expected output:
# {"success":true,"result":{"id":"polish","value":"lossy"}}

# Before Polish: image.png (240KB)
# After Polish (lossy): image.png (72KB) - 70% reduction
# After Polish (WebP): image.webp (48KB) - 80% reduction

# Check if Polish is active
curl -sI https://example.com/image.jpg | grep -i "cf-polished"
# Expected output:
# cf-polished: 0.7 (compression ratio)

Mirage: Lazy Loading and Mobile Optimization

Mirage lazy-loads images below the fold and scales them to fit the Visitor's viewport, reducing initial page weight and bandwidth on mobile connections.

# Enable Mirage via API
curl -X PATCH "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/mirage" \
  -H "Authorization: Bearer API_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"value":"on"}'
# Expected output:
# {"success":true,"result":{"id":"mirage","value":"on"}}

When a Visitor scrolls to an image, Mirage resizes it to match the device's screen resolution and viewport dimensions.

# Mirage transforms images dynamically:
# Desktop visitor (1920x1080): image.jpg -> serves original
# Mobile visitor (375x667): image.jpg -> serves 375px-wide version
# Slow connection: image.jpg -> serves lower quality, progressive enhancement

Image Resizing: On-the-Fly Transformations

Image Resizing lets you transform images by adding URL parameters. This is the most powerful option, giving you full control over dimensions, format, quality, and cropping.

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

# Advanced - resize, crop, and convert to WebP at 80% quality
https://example.com/cdn-cgi/image/width=400,height=300,fit=crop,quality=80,format=webp/image.jpg

# Expected result: The image is resized to 400x300, center-cropped,
# compressed to 80% quality, and served as WebP

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

curl -sI "https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/image.jpg" | grep -i "content-length"
# Expected output:
# content-length: 52000 (52KB - 78% smaller)

Image Resizing Parameter Reference

Combining All Three Features

For maximum optimization, enable all three features together. Polish handles format conversion and compression, Mirage optimizes for mobile viewports, and Image Resizing gives you on-the-fly control.

# Optimal configuration for most sites
# Polish: Lossy (for WebP/AVIF conversion)
# Mirage: On (for mobile lazy loading)
# Image Resizing: Enabled (for on-demand transformations)

# A single image URL with all optimizations working together:
# <img src="https://example.com/cdn-cgi/image/width=400,quality=80,format=auto/photo.jpg"
#      loading="lazy" alt="Optimized photo" />

FAQ

Practice Questions

1. What is the difference between Polish lossy and lossless modes?
2. How does Mirage improve image loading on mobile devices with slow connections?
3. What URL parameter would you use to convert an image to WebP with 80% quality and 600px width?

Summary

Cloudflare offers three image optimization features: Polish (automatic compression and format conversion), Mirage (Lazy Loading and viewport-aware resizing), and Image Resizing (on-the-fly transformations via URL parameters). Used together, they reduce image weight by 60-80%, improve Core Web Vitals, and cut bandwidth costs. All processing happens at Cloudflare's edge, so your origin server never performs image transformations.

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