Image CDN URL Patterns for Dynamic srcset Generation

Image CDN URL Patterns for srcset

Modern image CDNs let you generate responsive variants on-the-fly through URL parameters, eliminating the need to pre-build image files.

Cloudinary

<img
  src="https://res.cloudinary.com/demo/image/upload/w_1024,f_auto,q_auto/hero.jpg"
  srcset="https://res.cloudinary.com/demo/image/upload/w_320,f_auto,q_auto/hero.jpg 320w,
          https://res.cloudinary.com/demo/image/upload/w_640,f_auto,q_auto/hero.jpg 640w,
          https://res.cloudinary.com/demo/image/upload/w_1024,f_auto,q_auto/hero.jpg 1024w,
          https://res.cloudinary.com/demo/image/upload/w_1536,f_auto,q_auto/hero.jpg 1536w"
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="Hero"
/>

Key parameters: w_ (width), f_auto (auto format), q_auto (auto quality).

imgix

<img
  src="https://your-source.imgix.net/hero.jpg?w=1024&auto=format,compress"
  srcset="https://your-source.imgix.net/hero.jpg?w=320&auto=format,compress 320w,
          https://your-source.imgix.net/hero.jpg?w=640&auto=format,compress 640w,
          https://your-source.imgix.net/hero.jpg?w=1024&auto=format,compress 1024w,
          https://your-source.imgix.net/hero.jpg?w=1536&auto=format,compress 1536w"
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="Hero"
/>

Cloudflare Images

<img
  src="https://imagedelivery.net/ACCOUNT_HASH/IMAGE_ID/w=1024"
  srcset="https://imagedelivery.net/ACCOUNT_HASH/IMAGE_ID/w=320 320w,
          https://imagedelivery.net/ACCOUNT_HASH/IMAGE_ID/w=640 640w,
          https://imagedelivery.net/ACCOUNT_HASH/IMAGE_ID/w=1024 1024w,
          https://imagedelivery.net/ACCOUNT_HASH/IMAGE_ID/w=1536 1536w"
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="Hero"
/>

Benefits of CDN-Based srcset

Feature	Pre-built Files	CDN Transform
Storage cost	N × files per image	1 original file
Build time	Slow (image processing)	Instant
Format negotiation	Manual (<picture>)	f_auto header-based
Quality optimization	Fixed at build	Dynamic per-request
New width variants	Requires rebuild	Instant via URL

Generating srcset Programmatically

const widths = [320, 640, 768, 1024, 1280, 1536];
const baseUrl = "https://res.cloudinary.com/demo/image/upload";
const imageId = "hero.jpg";

const srcset = widths
  .map(w => `${baseUrl}/w_${w},f_auto,q_auto/${imageId} ${w}w`)
  .join(",\n");

This pattern makes it easy to maintain consistent responsive images across your entire site.