DEV Community

Cover image for The Complete Beginner's Guide to Cloudflare R2 Image Hosting (2025)
Leon Wong 282
Leon Wong 282

Posted on

The Complete Beginner's Guide to Cloudflare R2 Image Hosting (2025)

#programming #marketing

The Complete Beginner's Guide to Cloudflare R2 Image Hosting (2025)

Are you paying $15-30 per month for image hosting? Or worse—relying on free services that might delete your images without warning?

I spent months testing image hosting solutions for my blog. Some were too expensive. Others were unreliable. A few just disappeared overnight, taking my images with them.

Then I discovered Cloudflare R2.

R2 gives you 10GB of storage, unlimited bandwidth, and global CDN delivery—completely free. No credit card required. No hidden fees. No bandwidth charges that spiral out of control when your blog gets popular.

In this guide, I'll walk you through setting up R2 step-by-step, even if you've never touched cloud storage before. By the time you finish reading, you'll have professional-grade image hosting running—the same infrastructure big companies pay thousands for.

15 minutes from now, your images will be hosted globally and loading fast for readers anywhere in the world.

What Makes R2 Different (And Why It Matters for Your Blog)

Let's start with the basics. Cloudflare R2 is object storage—think of it as a hard drive in the cloud that's accessible via web URLs.

When you upload an image to R2, you get a permanent URL you can use anywhere: your blog, GitHub documentation, social media, forum posts. The image loads fast because Cloudflare's global CDN (Content Delivery Network) automatically caches it at edge servers worldwide.

Here's what makes R2 special for bloggers:

✅ Free tier is genuinely generous

✅ Zero bandwidth costs

✅ Global CDN included

✅ No coding required

✅ Professional-grade reliability

How R2 Compares to Alternatives

Service Free Tier Stability Bandwidth Costs
Imgur Unlimited May delete images Free
AWS S3 5GB (12 months) Excellent $$$ Expensive
Google Drive 15GB Good Slow, not designed for this
Cloudflare R2 10GB forever Excellent $0 (unlimited)

Convinced? Let's set it up.

Prerequisites (Don't Worry—It's Easier Than You Think)

Before we dive in, here's what you'll need:

1. A Cloudflare account (free—I'll show you how to create one)

2. A custom domain (optional but recommended—any domain you own works)

3. 10 minutes of your time

Don't have a domain yet? No problem. You can start with R2's default URLs and add a custom domain later. The free tier works either way.

Never used Cloudflare before? Perfect. This guide assumes zero prior knowledge. I'll explain everything as we go.

Setting Up Your R2 Image Hosting (The Complete Walkthrough)

Step 1: Create Your Cloudflare Account

Head to cloudflare.com and click Sign Up in the top right corner.

Enter your email and create a password. Cloudflare will send you a verification email—click the link to activate your account.

That's it. No credit card required. No trial period that converts to a paid plan.

Step 2: Enable R2

Once you're logged in, look at the left sidebar. Scroll down and click R2.

You'll see a button that says "Purchase R2 Plan" or "Get Started." Don't panic—the free plan is actually free. Cloudflare just uses confusing terminology.

Click the button. Add payment information.

Add Cloudflare payment information.jpg

You now have R2 enabled on your account.

Step 3: Create Your First Bucket

In R2 terminology, a bucket is like a folder in the cloud. It holds all your images.

Click Create bucket in the R2 dashboard.

Create a new Cloudflare R2 Bucket.jpg

Choose a bucket name. This needs to be unique globally (across all Cloudflare users), lowercase, with no spaces. Use hyphens for readability.

Examples:

  • my-blog
  • leonwong282-cdn
  • techblog-assets

Select a location. Choose Automatic unless you have a specific reason to pick a region. Cloudflare will optimize placement for performance.

Click Create bucket.

Set Cloudfare R2 Bucket name.jpg

🎉 Your bucket is live. Now let's make it accessible from the web.

Step 4: Connect a Custom Domain (Optional but Recommended)

This step makes your images accessible at clean URLs like images.yourdomain.com/photo.jpg instead of ugly default URLs.

If you don't have a domain yet, skip this step for now. You can always add it later.

If you have a domain:

  1. In your bucket settings, click the Settings tab
  2. Scroll to Public Access and click Connect Domain
  3. Enter a subdomain—I recommend images.yourdomain.com or cdn.yourdomain.com
  4. Click Connect domain

Set R2 Custom Domains.jpg

Cloudflare automatically handles everything:

  • Creates the DNS records
  • Provisions an SSL certificate (HTTPS)
  • Enables CDN caching

Wait 2-5 minutes for DNS to propagate worldwide. Grab a coffee.

Active R2 Custom Domains.jpg

Why custom domains matter:

  • Professional appearance
  • You control the URLs (if you switch providers, you keep your domain)
  • Better for SEO (search engines see your domain, not Cloudflare's)

Alternative: R2 provides default .[r2.dev](http://r2.dev) URLs that work immediately if you just want to test.

Getting Images Into R2 (Three Easy Methods)

Your R2 bucket is ready. Now let's upload images.

Method 1: Dashboard Upload (Simplest)

This is perfect if you're just getting started or uploading occasionally.

  1. Go to your bucket in the R2 dashboard
  2. Click the Upload button
  3. Drag and drop images (or click to browse)

Test R2 upload image.jpg

Your files are instantly available at:

https://images.yourdomain.com/filename.jpg

Like this:

Show a example for Cloudflare R2.jpg

That's it. No processing time. No compression. Instant.

Best for: Beginners, one-off uploads, testing

Method 2: Using an Upload Tool (Recommended for Regular Use)

If you blog regularly, manually visiting the dashboard gets tedious fast. Upload tools solve this.

Example: PicGo

These tools add a keyboard shortcut to your system. Take a screenshot, press the hotkey, and the image uploads automatically to R2. The URL copies to your clipboard instantly.

Best for: Regular bloggers, Markdown writers, content creators

I'll write a separate guide on configuring these tools with R2. For now, just know they exist.

Method 3: Command Line (Advanced—Skip if Intimidated)

Developers can use Cloudflare's Wrangler CLI to upload images from the terminal or automate uploads with scripts.

If you're not comfortable with command-line tools, ignore this method entirely. Methods 1 and 2 handle 99% of use cases.

Best for: Developers who want automation

How to Actually Use Your Images (In Blogs, Markdown, HTML)

Now that your images are uploaded, here's how to use them everywhere.

In Markdown:

![Description of image]([https://images.yourdomain.com/my-photo.jpg](https://images.yourdomain.com/my-photo.jpg))
Enter fullscreen mode Exit fullscreen mode

In HTML:

<img src="[https://images.yourdomain.com/my-photo.jpg](https://images.yourdomain.com/my-photo.jpg)" alt="Description">
Enter fullscreen mode Exit fullscreen mode

In WordPress, Ghost, or Medium:

Just paste the image URL when adding an image block. The platform fetches it automatically.

Organization Tips

As your image library grows, folders keep things sane.

Create folders in your bucket using forward slashes in filenames:

  • /blog/2025/january/screenshot.jpg
  • /social/twitter-banner.jpg
  • /thumbnails/post-01.jpg

Your URLs become:

https://images.yourdomain.com/blog/2025/january/screenshot.jpg

💡

Pro tip: Name your images descriptively. Use homebrew-terminal-screenshot.png instead of IMG_0234.png. It's better for SEO, and future you will thank present you when searching for a specific image.

How to Stay Within the Free Tier (And When You'd Ever Need to Pay)

Let's talk about limits. The R2 free tier includes:

✅ 10GB storage = ~10,000 typical blog images (assuming 1MB each)

✅ Unlimited downloads = Seriously. No bandwidth charges. Ever.

✅ 1 million upload operations per month = Unless you're uploading thousands of images daily, you'll never hit this.

Real-World Cost Examples

Small blog (1,000 visitors/month):

Cost: $0

Medium blog (10,000 visitors/month):

Cost: $0

Large blog (100,000 visitors/month):

Cost: Still probably $0

You'd only pay if you exceed 10GB of storage. Even then, it's only $0.015 per GB per month—incredibly cheap.

For context: a typical blog screenshot is 200-500KB. A high-quality photo is 2-3MB. You'd need to upload thousands of images to hit 10GB.

Most bloggers never pay a cent.

Conclusion: Your Images Are Now Hosted Professionally

In just 15 minutes, you've set up image hosting that would cost $15-30 per month elsewhere—completely free.

Key takeaways:

✅ R2 gives you 10GB of free storage and unlimited bandwidth

✅ Setup takes 10-15 minutes with no coding required

✅ Works with any blog platform, Markdown editor, or website

✅ Professional-grade reliability backed by Cloudflare's global infrastructure

Start uploading your images to R2 today and stop worrying about hosting costs, bandwidth limits, or broken image links.

What image hosting solution are you currently using? Have you tried R2? Let me know in the comments—I'd love to hear about your experience!

Related Resources

Want to explore other image hosting options? Check out my comprehensive guide: Image Hosting for Markdown: The Complete Guide to Picture Beds

Official documentation: Cloudflare R2 Documentation

Tags: Cloud Storage, Cloudflare, Web Development, Blogging, Tutorial

Top comments (0)