🎨 E-commerce / Media

Image Optimization at the Edge

Cloudflare automatically converts images to WebP/AVIF, resizes for any viewport, and serves from the nearest PoP — all via URL parameters. Up to 98% smaller on mobile. Free plan: 5,000 unique transformations/month.

The Problem

"Our mobile conversion rate is terrible. Users are downloading 1.8MB product images on 4G connections. We don't have an image CDN and setting one up is expensive and complex."

The Outcome

up to 98%

smaller on mobile. Desktop WebP ≈ 90% smaller (1.8 MB → 180 KB), mobile 480px ≈ 98% smaller (1.1 MB → 15 KB). Just a URL prefix change. Free plan: 5,000 transforms/month.

Live demo below

The problem

Your mobile users are downloading multi-MB images on 4G. That's why they bounce.

"Our mobile conversion is 40% lower than desktop. Product images average over 1MB each — we send the same desktop photo to every device."

— Head of Growth, e-commerce platform, 60% mobile traffic

Both sides run simultaneously — real API calls, no mocks

Without Cloudflare
Original · …
STRANDMON Chair
https://content.pongpisit.com/product-ek04.jpg

File size (measured live)…

…

Same full-resolution JPEG delivered to every device — desktop, tablet, and mobile

With Cloudflare Image Resizing
cdn-cgi/image · …
STRANDMON Chair optimised
WebP · q85

File size (measured live)…

…
Direct cdn-cgi/image URL — open in browser
↗ Open
https://dev.pongpisit.com/cdn-cgi/image/format=webp,quality=85/https://content.pongpisit.com/product-ek04.jpg

Zero origin changes · just prefix any image URL with /cdn-cgi/image/…/ · Cloudflare caches the result globally

The win

📦
90%+
Smaller file size
real savings measured live
⚡
98%
smaller on mobile 4G
1.1 MB → 15 KB — same image, right size for the device
🔧
0
code changes
just add /cdn-cgi/image/ prefix to the URL

Productionising this

What changes when you ship this for real

Use srcset, not single URL

Browsers pick the right size if you provide srcset="...?width=400 400w, ...?width=800 800w". One URL serves every device — no JS, no client detection.

Format negotiation

format=auto picks AVIF for Chrome, WebP for Firefox/Safari, JPEG for legacy. Newer browsers get smaller files automatically. Set quality=85 as the default.

Free plan ceiling

5,000 unique transformations/month included. Beyond: $0.50 / 1,000 unique transformations. "Unique" = unique URL, so cached variants don't re-bill.

Pre-compute popular sizes

For above-the-fold hero images, pre-warm 3–4 sizes (mobile, tablet, desktop, retina) on deploy. First-visitor latency drops from 100–300ms to cache-hit.

Don't resize what's already small

Skip /cdn-cgi/image/... for images <50KB. The transformation overhead isn't worth it. Wrap the URL helper in a size-check.

Polish + Mirage

Cloudflare Polish (lossless/lossy compression) and Mirage (slow-network image deferral) are zone-level toggles complementary to Image Resizing. Free on Pro plans.