Candid image pipeline 2026: AVIF source / WebP fallback / JPEG last; fetchpriority="high" on LCP image only; explicit dimensions always
Created 2026-05-22
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
widthandheightalways (kills CLS). Vary: Acceptheader configured correctly at the CDN.
CDN choice (in order of preference):
- Cloudflare Polish / Cloudflare Images — default for Cloudflare-hosted sites; bundled, edge-optimized, no egress fees.
- Sharp + Astro Image Service — works everywhere, build-time, no runtime cost. Good for static-output Astro.
- 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. - 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.