القائمة
Image optimization for WSH 2026 — AVIF/WebP conversion, image resizing, GIF-to-video conversion, lazy loading, and CoveredImage component refactoring.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention
DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026
Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app
Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance
Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.
| name | wsh-image-optimization |
| description | Image optimization for WSH 2026 — AVIF/WebP conversion, image resizing, GIF-to-video conversion, lazy loading, and CoveredImage component refactoring. |
The public directory contains 87.9MB of images and 183.7MB of GIFs. Images are loaded via jQuery sync XHR and processed client-side with image-size and piexifjs libraries.
Use this skill when optimizing image loading, converting formats, or refactoring image components.
Using Sharp (server-side build script):
npx sharp-cli --input public/images/*.jpg --output public/images/ --format avif --quality 50
Or programmatically:
const sharp = require("sharp");
await sharp("input.jpg").avif({ quality: 50 }).toFile("output.avif");
AVIF quality 50 ≈ JPEG quality 80 visually, with 60-70% size reduction.
The current component:
Replace with simple <img> tag:
// After
<img src={src} alt="" loading="lazy" style={{ objectFit: "cover" }} />
Get dimensions from server API or use CSS aspect-ratio.
Convert GIFs to MP4/WebM at build time:
ffmpeg -i input.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
Replace <canvas> GIF rendering with <video autoplay loop muted playsinline>.
<img loading="lazy" src={src} />
For LCP images (first visible), use loading="eager" and fetchpriority="high".
| Change | Visual Impact | Mitigation |
|---|---|---|
| AVIF conversion | Slight quality difference | Use quality 50+ and compare |
| CoveredImage simplification | Aspect ratio may differ | Match original dimensions with CSS |
| GIF to video | Animation timing may differ | Ensure autoplay and loop match |
application/public/images/application/public/movies/ (183.7MB total)client/src/components/foundation/CoveredImage.tsxclient/src/components/foundation/PausableMovie.tsxuseFetch(src, fetchBinary) → sync XHR