How to Fix Image CDN Delivery

An image CDN replaces the resize/encode/cache/serve pipeline you'd otherwise build yourself. One image source URL becomes thousands of variants on demand — resized for each viewport, encoded in the best format the browser supports, cached at edge nodes close to users. Performance wins are dramatic: 50-80% latency reduction, modern formats served automatically, dev time saved on build pipelines. This guide covers choosing a CDN, integration, and verification.

1. Why use an image CDN

Without image CDN

• Origin server resizes images at build time or upload time
• Multiple variants stored per image (mobile, tablet, desktop, retina)
• One origin location serves all users — latency varies by geography
• Format conversion is build-time (every image you want as AVIF needs pre-encoded variant)
• Adding a new size means regenerating all images

With image CDN

• One source image per asset
• CDN transforms on first request, caches result at edge
• Edge nodes near every major user population — low latency globally
• Format negotiation per request based on Accept header — AVIF to supported browsers, WebP to others, JPEG fallback
• Adding sizes is a URL parameter change, zero rebuild

2. Audit current delivery

curl -sI -H "Accept: image/avif,image/webp,*/*" https://yoursite.com/hero.jpg

# Look for:
# Content-Type: image/jpeg → format not negotiated
# Cache-Control: max-age=... → caching present
# X-Cache: HIT/MISS → CDN presence
# Server: cloudfront/cloudflare/etc → CDN identity

3. Compare image CDN options

For most small-to-mid sites, ImageKit or Bunny CDN offer the best price/performance. For sites already on Vercel/Netlify, use their built-in solution.

4. Cloudinary integration example

Sign up and configure

1. Create account at cloudinary.com
2. Note your cloud name (e.g. demo-cloud)
3. Configure auto-upload mapping pointing at your existing origin OR upload images to Cloudinary's library

URL format

https://res.cloudinary.com/<cloud_name>/image/upload/
  <transformations>/
  <public_id>.<format>

Examples

<!-- Original Cloudinary asset -->
<img src="https://res.cloudinary.com/demo/image/upload/sample.jpg" alt="...">

<!-- Resize to 800px wide -->
<img src="https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg" alt="...">

<!-- Resize + auto format + auto quality -->
<img src="https://res.cloudinary.com/demo/image/upload/w_800,f_auto,q_auto/sample.jpg" alt="...">
<!-- f_auto: AVIF/WebP/JPEG based on browser
     q_auto: optimal quality based on content
     w_800: 800px wide -->

<!-- Full responsive set -->
<img src="https://res.cloudinary.com/demo/image/upload/w_800,f_auto,q_auto/sample.jpg"
     srcset="https://res.cloudinary.com/demo/image/upload/w_400,f_auto,q_auto/sample.jpg 400w,
             https://res.cloudinary.com/demo/image/upload/w_800,f_auto,q_auto/sample.jpg 800w,
             https://res.cloudinary.com/demo/image/upload/w_1200,f_auto,q_auto/sample.jpg 1200w,
             https://res.cloudinary.com/demo/image/upload/w_2400,f_auto,q_auto/sample.jpg 2400w"
     sizes="(max-width: 800px) 100vw, 1200px"
     width="1200" height="675"
     alt="...">

5. ImageKit integration example

<!-- Simple resize -->
<img src="https://ik.imagekit.io/yourkey/sample.jpg?tr=w-800,f-auto,q-auto" alt="...">

<!-- Or with helper SDK -->
import IKImage from 'imagekitio-react';

<IKImage
  urlEndpoint="https://ik.imagekit.io/yourkey"
  path="/sample.jpg"
  transformation={[{ width: 800, format: 'auto', quality: 'auto' }]}
  loading="lazy"
/>

6. Bunny CDN integration

Bunny is unique — works as a regular CDN that points at your origin, plus optional Image Optimizer add-on.

<!-- Bunny Optimizer URL parameters -->
<img src="https://your-zone.b-cdn.net/hero.jpg?width=800&optimizer=image" alt="...">

<!-- With multiple params -->
<img src="https://your-zone.b-cdn.net/hero.jpg?width=800&aspect_ratio=16:9&quality=80&optimizer=image" alt="...">

7. Next.js Image with default optimisation

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.example.com' }
    ]
  }
};

// Component
import Image from 'next/image';

<Image
  src="https://cdn.example.com/hero.jpg"
  alt="..."
  width={1200}
  height={675}
  priority
/>
// Outputs srcset, sizes, format negotiation automatically
// Served via Vercel's image optimisation when hosted on Vercel

8. Migration strategy

Phase 1: Set up CDN, test

1. Sign up for CDN, configure origin (or upload assets)
2. Test 5-10 images via direct CDN URLs in browser
3. Verify transformations work (resize, format conversion)

Phase 2: Update templates

1. Update image-rendering component/helper to output CDN URLs
2. Deploy to staging, verify visually
3. Check format negotiation: open page in Chrome DevTools → Network → Img → verify Content-Type is image/avif on modern browsers
4. Test on slow 3G connection — confirm size reduction translates to faster LCP

Phase 3: Production deploy

1. Deploy template changes
2. Monitor CDN dashboard for cache hit rate (target 90%+ after warm-up)
3. Monitor Search Console Core Web Vitals for LCP improvement
4. Compare bandwidth costs before/after

9. Verify edge caching and format negotiation

# Check cache HIT
curl -sI https://res.cloudinary.com/yourcloud/image/upload/w_800,f_auto/hero.jpg | \
  grep -i "x-cache\|cf-cache\|age\|cache-control"

# Expected:
# X-Cache: HIT
# Age: 12345 (seconds since cached)
# Cache-Control: public, max-age=31536000

# Check format negotiation
curl -sI -H "Accept: image/avif" https://res.cloudinary.com/yourcloud/image/upload/f_auto/hero.jpg | \
  grep -i "content-type"

# Expected: Content-Type: image/avif

curl -sI -H "Accept: image/webp" https://res.cloudinary.com/yourcloud/image/upload/f_auto/hero.jpg | \
  grep -i "content-type"

# Expected: Content-Type: image/webp