medialisted

# /media Solves the assets-optimization bottleneck (usually done twice in a naive workflow). ## When to use - After `/inbox` (materials validated). - Every time a new batch of media arrives. ## Requirements - Tools available: `ffmpeg` (for video + posters), `cwebp` / `avifenc` / `sharp` (for photos). - On Windows the simplest path: node.js + `sharp` (`npm install -g sharp-cli`) + `ffmpeg`. - If tools are missing — inform the user, provide install commands. ## Process **Step 1. Read config** - `brief/00-priority.md` — desktop-first or mobile-first (affects priority sizes). - `brief/06-technical.md` — media hosting decision (local / Vercel / R2). - `brief/blocks/video-embed.md` — hero-loop needed? formats? **Step 2. Walk inbox/media/photos/** For each photo: **A. Determine purpose** - From filename / `brief/04-content.md`. - Hero — priority, LCP-critical. - Portrait / case — standard. - Icon-size (small) — optimize differently. **B. Generate size variants** For desktop-first: - 480w, 768w, 1200w, 1920w, 2400w. For mobile-first: - 320w, 480w, 768w, 1200w, 1920w. **C. Convert to formats** - `.webp` (required, quality ~80-85). - `.avif` (optional, quality ~60-70 — better compression). - Original `.jpg` fallback — only if old-browser support needed (usually not). **D. Save in `site/media/`** Naming: `<name>-<width>.webp` Example: ``` site/media/ ├── hero-480.webp ├── hero-768.webp ├── hero-1200.webp ├── hero-1920.webp └── hero-2400.webp ``` **E. Generate `srcset`-s