← knowledge.oriz.in

Image CDN — chained 3-tier fallback (Cloudflare Images → wsrv.nl → ImageKit)

decision imagescdnfallbackoriz-kitnever-hit-quotas

Image CDN — chained 3-tier fallback (Cloudflare Images ? wsrv.nl ? ImageKit)

Decision

Every image in the family resolves through a 3-tier chained fallback:

  1. Cloudflare Images — primary. Same edge as our Pages deploys, bundled with the free Pages plan, no extra signup.
  2. wsrv.nl — fallback 1. Public URL-transform proxy, no signup, no auth — survives outages of any authenticated provider.
  3. ImageKit — fallback 2. 20 GB/mo + DAM, email-only signup.

The chain is implemented as the <Image> component wrapper inside

. On image

load failure (5xx, transformation error, network) the wrapper rewrites the src to the next rung's URL and retries.

Why

Implementation hint

// inside @chirag127/oriz-kit
import { useState } from 'react';

const CHAIN = [
  (src, opts) => `/cdn-cgi/image/${cfImageOpts(opts)}/${src}`,
  (src, opts) => `https://wsrv.nl/?url=${encodeURIComponent(src)}&${wsrvOpts(opts)}`,
  (src, opts) => `https://ik.imagekit.io/oriz/${imagekitOpts(opts)}${src}`,
];

export function Image({ src, ...opts }) {
  const [tier, setTier] = useState(0);
  return (
    <img
      src={CHAIN<!-- TODO: broken link, was [tier](../src, opts) -->}
      onError={() => setTier(t => Math.min(t + 1, CHAIN.length - 1))}
      {...opts}
    />
  );
}

The Astro variant follows the same shape — is:inline script swaps src on error. The kit owns this logic so individual sites are unaware of the chain.

Implications

Cross-refs