{"id":658,"slug":"image-pipeline-avif-webp-fetchpriority-2026","title":"Candid image pipeline 2026: AVIF source / WebP fallback / JPEG last; fetchpriority=\"high\" on LCP image only; explicit dimensions always","kind":"rule","scope":"business","status":"current","audiences":["claude-code","candid-team"],"topics":["core-web-vitals","image-optimization"],"reference_body":"**Standard pipeline (every Candid build):**\n\n- Source format: **AVIF** (Q ~50-60) for hero/photography, **WebP** for everything else, JPEG fallback.\n- `<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.)\n- `fetchpriority=\"high\"` on **the** LCP image only — at most one per page; multiple cancel out the benefit.\n- `loading=\"lazy\"` below the fold, `loading=\"eager\"` for the first 3-6 images.\n- **Explicit `width` and `height` always** (kills CLS).\n- `Vary: Accept` header configured correctly at the CDN.\n\n**CDN choice (in order of preference):**\n\n1. **Cloudflare Polish / Cloudflare Images** — default for Cloudflare-hosted sites; bundled, edge-optimized, no egress fees.\n2. **Sharp + Astro Image Service** — works everywhere, build-time, no runtime cost. Good for static-output Astro.\n3. **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.\n4. **Cloudinary / imgix** — only if the client already has a contract.\n\n**Build gate:** pre-commit hook or CI step that fails on raw JPEGs over 200KB.","rationale_body":null,"metadata":null,"links":{"outgoing":[{"slug":"lcp-killers-catalogue","title":"Reference: the 8 most common LCP killers — ranked by observed frequency","kind":"reference","scope":"business","link_type":"relates-to"}],"incoming":[]},"created_at":"2026-05-22T21:24:18.324Z","updated_at":"2026-05-22T21:24:18.324Z"}