Image Optimization Weapon

The image-optimization-weapon encodes the complete 2026 image delivery playbook: format selection, responsive delivery, placeholder strategies, framework integration, and tooling. Its primary audience is React/Next.js developers shipping web products where images are a material fraction of page weight and LCP candidates.

The non-negotiables (detailed in guides/00-principles.md):

1. AVIF first, WebP fallback — never JPEG as primary for new raster content.
2. width + height always — missing dimensions cause CLS.
3. LCP images get priority (Next.js <16) or preload (Next.js 16+) / fetchpriority="high" (native) — never loading="lazy".
4. sizes must match the CSS layout — the default 100vw is wrong for most components.
5. Placeholders must be chosen deliberately — LQIP via Sharp is the default; BlurHash/ThumbHash for color-faithful scenarios.

When to use this skill