CDN Image Processing Cost Analysis: On-the-Fly vs Pre-Generated Variant Economics

But "predictable" doesn't mean cheap. Let's do real math. A 5,000-image catalog with 10 variants each at an average of 85KB is ~4.1GB of storage. At S3 Standard $0.023/GB, that's under $0.10/mo — trivial. The real cost is the build. If you're using a service like Imgix or an EC2-based Sharp pipeline, you're paying for 50,000 transformations upfront. And more importantly, you're paying for waste. In every catalog I've audited, 30-45% of pre-generated variants are never requested. Those 480w thumbnails for vertical video products? Zero hits. You're storing cold assets that'll never pay you back. That's why I always tie variant generation to actual Responsive Image CDN Automation: Generating srcset Variants on the Fly data — let your access logs tell you which widths your users actually need instead of guessing.

There's also the operational drag that doesn't show up on the invoice. Every time you want to add a new format or adjust quality, you've got to reprocess the entire library. One client wanted to move from quality 82 to 75 after we proved it saved 18% bytes with no SSIM loss. With on-the-fly, it's a config change. With pre-generated, it was a 14-hour batch job that cost $340 in Fargate time and blocked their creative team. I'll cover caching strategies more in Balancing Lazy Loading and Preloading with CDN: Optimal Image Loading Strategies, but the short version is: if your variant set changes more than twice a year, pre-generation starts to hurt. And don't forget cache control headers — per HTTP Working Group Specifications on Cache-Control and CDN-Cache-Control, you'll still want immutable, long-lived caching even for pre-built files to avoid origin hits.

# Bash: calculate true monthly cost of pre-generated variant storage + build
# Assumes you're using S3 Standard + a one-time Sharp/ffmpeg job on Fargate

CATALOG_SIZE=50000          # masters
VARIANTS_PER_MASTER=8       # e.g., 4 widths x 2 formats
AVG_VARIANT_KB=95
STORAGE_PRICE_GB=0.023
PUTS_PRICE_PER_1000=0.005
TRANSFORM_COST_PER_1000=1.20  # e.g., Fargate/Sharp or SaaS fee

TOTAL_VARIANTS=$((CATALOG_SIZE * VARIANTS_PER_MASTER))
TOTAL_GB=$(echo "$TOTAL_VARIANTS * $AVG_VARIANT_KB / 1024 / 1024" | bc -l)
STORAGE_COST=$(echo "$TOTAL_GB * $STORAGE_PRICE_GB" | bc -l)
BUILD_COST=$(echo "$TOTAL_VARIANTS / 1000 * $TRANSFORM_COST_PER_1000" | bc -l)
PUT_COST=$(echo "$TOTAL_VARIANTS / 1000 * $PUTS_PRICE_PER_1000" | bc -l)

printf "Variants: %d (%.2f GB)\n" $TOTAL_VARIANTS $TOTAL_GB
printf "Monthly storage: \$%.2f\n" $STORAGE_COST
printf "One-time build: \$%.2f + \$%.2f PUTs\n" $BUILD_COST $PUT_COST
# Variants: 400000 (36.24 GB)
# Monthly storage: $0.83
# One-time build: $480.00 + $2.00 PUTs

Breaking Down the Real Numbers: A Side-by-Side Model

So which model wins? I've stopped giving a universal answer because it depends on two numbers: your cache hit ratio and your variant utilization rate. If you have high traffic, stable variants, and hit ratios above 90%, on-the-fly often wins on total cost because you only pay for what's actually used. If you have a huge long-tail catalog with low traffic per image — think marketplace with 2M SKUs where most get 10 views a month — pre-generating 8 variants for each one means you're paying storage for cold inventory. The sweet spot for many of our customers is hybrid: pre-generate the top 3 critical widths for your hero images, leave the rest to edge transforms.

When I run a formal image cost analysis for clients, I normalize everything to cost per 1M delivered images, not just transforms or storage alone. You need to include compute, origin egress, storage, and — crucially — cache revalidation. A helpful sanity check comes from web.dev Articles on modern formats: switching to AVIF/WebP can cut delivered bytes by 30-40%, which directly reduces your bandwidth bill and can offset higher encode costs. Don't optimize variant strategy in isolation from format strategy. For an intermediate team, my rule of thumb is to model three scenarios (optimistic, realistic, pessimistic hit ratios) before committing to either path.

The table below is pulled from a recent anonymized comparison I did for a 20M request/mo site with a 150k image catalog. Both setups used WebP + AVIF negotiation and identical 5 breakpoints. The only difference was economics. Notice how the compute line dominates on-the-fly when the hit ratio slips even a little.

Putting the Hybrid Model Into Production: Pre-Generate Your Hot Path

Here's where theory hits your build pipeline. Don't try to pre-generate every permutation — you'll drown in storage and deployment time. We've seen teams try to generate 12 breakpoints x 3 formats x 4 DPIs for 50,000 SKUs. That's 7.2 million files before you've even served a single request. Instead, you want to pre-generate the 5-7 variants that drive 80-85% of your traffic and let on-the-fly handle the rest.

For most e-commerce and media sites, that hot path is pretty predictable: 320w, 640w, 1024w, and 1920w in both WebP and AVIF, all at 1x. That's 8 files per source image. At an average of 85KB per variant, you're looking at ~680KB of storage per master. For a catalog of 100,000 images, that's about 68GB — roughly $1.56/month on S3 Standard or $1.02 on R2. Basically noise compared to your compute bill.

The trick is to make your CDN configuration check for the pre-generated variant first, then fall back to dynamic transformation with aggressive caching. Don't let that fallback hit origin every time. Cache the transformed result at the edge for at least 30 days and use Origin Shield to collapse requests. Here's a simplified Cloudflare Worker pattern we've used to cut transform costs by 62% without adding build complexity:

// Hybrid image handler: checks R2 for pre-gen, falls back to transform
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const width = url.searchParams.get('w') || '1024';
    const format = request.headers.get('Accept')?.includes('image/avif') ? 'avif' : 'webp';
    
    // 1. Try pre-generated hot path variant first
    const pregenKey = `pregen/${width}w/${format}/${url.pathname}`;
    let object = await env.IMAGE_BUCKET.get(pregenKey);
    if (object) {
      return new Response(object.body, {
        headers: {
          'Content-Type': `image/${format}`,
          'Cache-Control': 'public, max-age=2592000, stale-while-revalidate=86400',
          'X-Image-Source': 'pre-generated'
        }
      });
    }
    
    // 2. Fallback: on-the-fly transform (cache for 30d at edge)
    const imageRequest = new Request(`https://origin.example.com${url.pathname}`, request);
    return fetch(imageRequest, {
      cf: {
        image: { width: parseInt(width), format: format, quality: 80 },
        cacheTtl: 2592000,
        cacheEverything: true
      }
    });
  }
}

Advanced Patterns: Taming Cache Fragmentation and Transform Storms

The biggest gotcha with on-the-fly isn't the per-request price — it's cache key explosion. If you allow arbitrary `w=123&h=456&q=81` parameters, you'll end up with a 35-45% cache hit ratio instead of 92%+. Every cache miss is a full transform operation, and worse, it can trigger an origin fetch. One client we audited was paying $1,200/month in transforms because bots were crawling random dimension combinations. Lock it down. Validate parameters at the edge and normalize them to your allowed breakpoints. If someone requests `w=537`, round it to `640`. You'll save thousands of duplicate transforms.

The second killer is the thundering herd on cold cache. When you purge or deploy 10,000 new images, the first request for each variant will hit origin simultaneously if you don't have request collapsing enabled. With pre-generated variants, this is less painful — it's just object storage fetches. With on-the-fly, it's concurrent CPU-heavy transforms that can queue and timeout. Always enable Origin Shield or Tiered Cache, and consider pre-warming critical images post-deploy with a simple script that requests your top 1,000 URLs. It's a 90-second job that prevents a 5-minute origin meltdown.

And don't forget what else your image pipeline should be doing at the edge. If you're already intercepting the image request, that's the perfect place to handle Image Metadata Stripping at CDN Edge: EXIF Removal for Privacy and Performance — you'll shave 15-35KB per image (especially from iPhone photos) and avoid leaking GPS data. For icon systems and UI graphics, consider whether you even need raster transforms at all. Our analysis on SVG Delivery Optimization Through CDN: Inline, External, and Sprite Approaches shows vector delivery can eliminate 60% of your small-image transform volume, and for legacy raster icons, CSS Sprite Generation and CDN Optimization: When Sprites Still Beat HTTP/2 still wins on product listing pages with 40+ thumbnails.

Frequently Asked Questions