How do I deliver images and video closer to users with a CDN?

To deliver images and video closer to users with a CDN, you usually place your media on a CDN-backed origin and let the CDN cache and serve it from edge locations near each visitor.

Basic approach

1. Store media in an origin
   • Commonly: object storage like S3, Cloud Storage, Azure Blob, or your own media server.
2. Put a CDN in front of it
   • Examples: Cloudflare, Akamai, Fastly, CloudFront, Bunny, etc.
3. Serve media through CDN URLs
   • Instead of https://yourdomain.com/media/video.mp4
   • Use https://cdn.yourdomain.com/media/video.mp4
4. Set cache headers correctly
   • Long cache for versioned files
   • Shorter cache or revalidation for frequently changing files

For images

Best practice is usually:

• Use a CDN that can transform images at the edge
  • Resize, crop, convert to WebP/AVIF, adjust quality
• Use responsive images
  • Serve different sizes with srcset and sizes
• Version file names
  • Example: hero.abc123.jpg
• Set long-lived caching
  • Example: Cache-Control: public, max-age=31536000, immutable

Example

<img
  src="https://cdn.example.com/images/photo-800.jpg"
  srcset="
    https://cdn.example.com/images/photo-400.jpg 400w,
    https://cdn.example.com/images/photo-800.jpg 800w,
    https://cdn.example.com/images/photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Example"
/>

For video

Best practice is usually:

• Use segmented streaming
  • HLS (.m3u8) or MPEG-DASH
  • This lets CDN cache small chunks efficiently
• Store multiple renditions
  • 360p, 720p, 1080p, etc.
• Serve manifests and segments via the CDN
• Use adaptive bitrate streaming
  • The player switches quality based on bandwidth
• Cache segments aggressively
  • Segment files are ideal CDN content

Example

• Manifest: https://cdn.example.com/video/master.m3u8
• Segments: https://cdn.example.com/video/720p/segment001.ts

Important configuration

Cache headers

• Static versioned assets:

  Cache-Control: public, max-age=31536000, immutable
  

• Frequently updated content:

  Cache-Control: public, max-age=60, s-maxage=300
  

URL versioning

• Use hashed filenames so you can cache “forever” without stale content problems.
• Example: banner.8f3a2c1.jpg

Origin shielding / tiered caching

• Reduces load on your origin by having one central cache fill edges.

Purging/invalidation

• If content changes, purge by URL or use new versioned URLs.

Common architecture

User
  ↓
CDN edge nearest user
  ↓
CDN cache miss
  ↓
Origin storage/server

Good defaults

If you want a simple setup:

• Put images/videos in object storage
• Serve them through a CDN custom domain
• Use cache-busted filenames
• For video, prefer HLS/DASH over a single large MP4
• For images, generate multiple sizes and possibly use a CDN image optimizer

If you want, I can also give you:

1. a CloudFront + S3 setup,
2. a Cloudflare setup,
3. or a step-by-step implementation for your stack.