Image CDN basics — what it is and when you need one

An image CDN (Content Delivery Network) optimises, transforms and delivers images from servers close to your users. Services like Cloudflare Images, Imgix, Cloudinary and Bunny Optimizer fall into this category.

But do you actually need one?

What an image CDN does

1. Serves images from edge locations — your image loads from a server near the user, not from your origin
2. Automatic format conversion — serves AVIF to Chrome, WebP to Safari, JPEG to old browsers
3. On-the-fly resizing — request any size via URL parameters (?w=400&h=300)
4. Quality optimisation — automatically finds the best compression level
5. Caching — stores transformed images so repeated requests are instant

A typical image CDN URL looks like:

https://cdn.example.com/images/hero.jpg?w=800&format=auto&quality=80

When you need an image CDN

You probably need one if:

• You serve thousands of different images (e-commerce, user-generated content)
• Your images are dynamic (user uploads that need resizing on the fly)
• You have a global audience and care about edge latency
• You're spending significant time managing image variants in your build pipeline

You probably don't need one if:

• You have a small set of static images (a blog, portfolio, landing page)
• Your images are prepared at build time and don't change frequently
• You're already on a CDN-backed host (Vercel, Cloudflare Pages, Netlify)
• You want to avoid vendor lock-in and monthly costs

The cost question

Image CDNs charge based on transformations, bandwidth or both:

| Service | Free tier | Paid pricing | | ----------------- | ------------------------- | ------------------------- | | Cloudflare Images | No free tier | $5/month + $1/100K images | | Cloudinary | 25K transformations/month | $89/month+ | | Imgix | 1K master images | $100/month+ | | Bunny Optimizer | 500 MB/month | $9.50/month+ |

For a personal blog or small business site, this cost is hard to justify when you can prepare images at build time for free.

The alternative: build-time optimisation

For static or semi-static sites, you can achieve 90% of what an image CDN offers at build time:

1. Compress images to WebP/AVIF using browser tools
2. Resize to 3–4 breakpoints using our resize tool
3. Use srcset to serve the right size per viewport
4. Deploy to a CDN-backed host (Cloudflare Pages, Vercel, Netlify)

Your images are:

• Pre-compressed (no per-request processing cost)
• Available at edge locations (via your host's CDN)
• Served in the right size via srcset

The only thing you lose is automatic format negotiation — but with 97% WebP support, you can safely serve WebP to everyone.

When to upgrade from build-time to an image CDN

Consider switching when:

• You're managing more than ~500 images manually
• Users upload images that need processing (profiles, product photos)
• You need real-time cropping or face detection
• Your build pipeline is getting slow from image processing
• You're spending more time managing images than creating content

The middle ground: Next.js Image component

If you're using Next.js (like Tiny Pixel Kit), the built-in <Image> component handles:

• Automatic resizing and srcset generation
• Lazy loading
• Format conversion (when using a supported loader)
• Blur placeholders

Combined with a deployment platform like Vercel (which includes an image optimisation API), you get many CDN benefits without a separate service.

Summary

| Approach | Best for | Cost | | ------------------------------ | ---------------------------- | ----------------------- | | Browser tools (Tiny Pixel Kit) | Small sites, prepared assets | Free | | Build-time optimisation | Static sites, blogs | Free | | Next.js Image + Vercel | Next.js apps | Included in Vercel plan | | Image CDN | Large-scale, dynamic content | $5–100+/month |

Start with browser-based tools. Move to build-time automation when your image count grows. Add an image CDN only when you genuinely need dynamic, on-the-fly processing.