How to Set Up Responsive Images with Cloudflare Image

You want faster websites and happier visitors without spending extra money. Cloudflare Image Transformations deliver exactly that. On the free plan, you get 5,000 unique image variants per month.

You resize images on the fly, serve WebP or AVIF to modern browsers, and build perfect srcset setups for responsive design. Key takeaways: enable it in your dashboard in minutes, use simple URL tweaks for srcset, stick to a few standard sizes to stay under limits, and watch load times drop while keeping quality sharp.

This guide walks you through every step so you can launch optimized images today.

Smaller images load quicker. Notice how the larger sloth version takes more space and data. Cloudflare lets you create these tailored versions automatically.

Why Responsive Images Make a Difference

Visitors hate slow pages. Images often cause the biggest delays. A desktop hero photo that weighs 2MB loads fine on fiber, but it kills mobile users on spotty connections. Responsive images fix this.

The browser picks the right size based on screen width and pixel density. You serve tiny versions to phones and crisp ones to Retina displays. Results show up fast: lower bounce rates, better SEO scores, and happier users in the US, UK, Canada, and beyond.

Cloudflare handles the heavy lifting. You don’t pre-generate dozens of files or pay for storage. The edge network resizes images in real time. Format=auto sends AVIF or WebP when possible, then falls back to JPEG. Quality stays high while file sizes shrink by 50-70%. You gain speed without sacrificing looks.

What Cloudflare Image Transformations Actually Do

Cloudflare Image Transformations resize, crop, sharpen, and optimize images stored anywhere—your server, S3, or another host. You point to the original via a special URL. Cloudflare fetches it, applies your rules, caches the result, and serves it lightning-fast.

The magic happens at /cdn-cgi/image/. Add parameters like width=800,quality=80,format=auto. The source path follows. For example:

https://yourdomain.com/cdn-cgi/image/width=800,quality=80,format=auto,/images/hero.jpg

Cloudflare delivers a resized, optimized version. It respects aspect ratios unless you force otherwise. Fit options let you cover, contain, or crop. Sharpen adds crispness after downscaling. DPR handles high-density screens.

Free plan users enjoy this fully. Limits apply only to unique variants—distinct parameter combos. Reuse the same settings across images, and you stretch those 5,000 slots far.

Step-by-Step Setup on Your Free Account

Log into your Cloudflare dashboard at dash.cloudflare.com. Pick the domain you want to optimize.

Head to Images in the sidebar. Click Transformations. Your zone appears in the list. If it shows “Not enabled,” hit the Enable button. This takes seconds and costs nothing. Once active, transformations work site-wide.

Confirm your origin images stay public. Cloudflare must fetch them without passwords or signed links. Test by visiting an original image URL directly.

You now have the foundation. Next, tweak your HTML.

Building Responsive Images with srcset and Sizes

Switch to srcset for true responsiveness. The browser downloads only what it needs. Use w descriptors for fluid layouts or x for fixed ones.

Start simple. Pick four common widths: 480px for mobile, 800px for tablets, 1200px for small desktops, and 1920px for large screens. Add format=auto and quality=75-80 for balance.

The fallback src uses a mid-size version. Sizes tell the browser the image’s display width at different viewports. Srcset lists candidates with their natural widths. The browser calculates pixels needed, including device pixel ratio, and grabs the best match.

Add dpr for Retina. For example:

srcset=”/cdn-cgi/image/width=800,dpr=2,quality=80,format=auto,/images/hero.jpg 1600w”

This delivers sharper versions to high-density screens without doubling every variant.

Reuse these exact parameters everywhere. One set of four sizes for all hero images counts as four variants per original, not hundreds.

Smart Ways to Stay Under the 5,000 Limit

Unique transformations mean distinct parameter strings. The same width=800,quality=80,format=auto counts once, no matter how many images use it.

Stick to fixed sets. Define three or four global sizes in your theme or template. Avoid random numbers or per-image tweaks.

Use fit=scale-down to prevent upscaling small originals. It saves processing and keeps variants low.

Monitor usage in the dashboard under Images > Usage. You see transformed images and variants over the last 30 days. Adjust if you near the cap.

For blogs or portfolios with 200 posts and five sizes each, you hit about 1,000 variants—well under limit.

Testing Your Setup Works

Paste a transformed URL in your browser. Check the network tab. You should see a smaller file size, content-type image/webp or image/avif, and cf-cache-status HIT after the first load.

Emulate devices in dev tools. Mobile view should load the smallest variant. High-DPI should pull sharper ones.

If you get errors, verify the path after /cdn-cgi/image/ matches your origin exactly. Ensure transformations stay enabled for the zone.

Purge cache if you change parameters. Dashboard > Caching > Purge Everything clears variants too.

Extra Boost: Turn On Polish

Polish complements transformations. Go to Speed > Optimization. Enable Polish and select WebP. It auto-converts non-transformed images. Together, they cover all bases—resized responsive ones plus simple originals.

Polish costs nothing extra on free plans.

Final Thoughts

You now control image speed without extra work or cost. Enable transformations, craft srcset tags with consistent parameters, test thoroughly, and watch performance climb.

Your site loads faster, ranks better, and delights visitors. Start small—one page or hero image—then roll it out. Cloudflare handles the rest at the edge. You focus on content. Your users thank you with longer visits and quicker returns.