# Image Optimization Weapon > Image optimization specialist for React/Next.js and HTML contexts — AVIF/WebP format selection (AVIF is the 2026 production default), responsive srcset/sizes calculus, blur placeholders (LQIP via Sharp, BlurHash-as-CSS-gradient, ThumbHash), next/image remote patterns and the Next.js 16 priority→preload shift, and CLI tooling (Sharp Node API, Squoosh CLI for one-offs). Use when the user says "optimize my images", "convert to AVIF", "set up srcset", "add blur placeholders", "next/image remote patterns", "LCP image is slow", "fix layout shift from images", "AVIF vs WebP", or when auditing a codebase for unoptimized image delivery. Do NOT use for SVG icon systems (icon-system-guardian), general Lighthouse audits beyond image-specific findings (lighthouse-pagespeed-guardian), CDN/caching architecture beyond image Cache-Control (devops-guardian), or CSS animation performance (ux-ui-guardian). - Skill: `the-notorious-avengers/image-optimization-weapon` (Agent Skill, multi-file: 50 files) - Install (CLI): `npx skillmds@latest add the-notorious-avengers/image-optimization-weapon` - Raw SKILL.md: https://api.skillmd.com/api/skills/the-notorious-avengers/image-optimization-weapon/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: The-Notorious-Avengers (https://skillmd.com/u/the-notorious-avengers) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/the-notorious-avengers/image-optimization-weapon --- # 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 **Trigger on:** - "optimize my images" / "convert to AVIF" / "switch to AVIF" - "set up srcset and sizes" / "responsive images" - "add blur placeholders" / "BlurHash" / "LQIP" / "ThumbHash" - "next/image remote patterns" / "next/image config" / "Image component" - "my LCP image is slow" / "images causing layout shift" / "CLS from images" - "AVIF vs WebP" / "which image format should I use" - "audit our images" / "image optimization report" - "Squoosh" / "Sharp" / "ImageOptim" (in web context) **Do NOT trigger on:** - SVG icon library selection → `icon-system-guardian` - Lighthouse score interpretation / CWV remediation beyond images → `lighthouse-pagespeed-guardian` - CDN cache TTL / Cache-Control strategy → `devops-guardian` - CI build pipelines beyond per-image squash → `devops-guardian` --- ## Quick-reference decision table | Scenario | Recommendation | |---|---| | New raster content (photo, hero, product) | AVIF primary, WebP fallback, `