Candid image pipeline 2026: AVIF source / WebP fallback / JPEG last; fetchpriority="high" on LCP image only; explicit dimensions always

Standard pipeline (every Candid build):

  • Source format: AVIF (Q ~50-60) for hero/photography, WebP for everything else, JPEG fallback.
  • <picture> element with type negotiation, AVIF source first. (AVIF is ~50% smaller than JPEG, ~20-30% smaller than WebP per Cloudinary/Smashing measurements; ~85-90% global browser support per Caniuse.)
  • fetchpriority="high" on the LCP image only — at most one per page; multiple cancel out the benefit.
  • loading="lazy" below the fold, loading="eager" for the first 3-6 images.
  • Explicit width and height always (kills CLS).
  • Vary: Accept header configured correctly at the CDN.

CDN choice (in order of preference):

  1. Cloudflare Polish / Cloudflare Images — default for Cloudflare-hosted sites; bundled, edge-optimized, no egress fees.
  2. Sharp + Astro Image Service — works everywhere, build-time, no runtime cost. Good for static-output Astro.
  3. Next.js <Image> — fine if you're on Vercel, expensive if you're not (Vercel charges per source image). Don't use on non-Vercel hosts unless you've measured the cost.
  4. Cloudinary / imgix — only if the client already has a contract.

Build gate: pre-commit hook or CI step that fails on raw JPEGs over 200KB.