wsh-image-optimization

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.

WSH: Image Optimization

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.

Techniques

1. Convert Images to AVIF/WebP

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.

2. Simplify CoveredImage Component

The current component:

1. Fetches image as binary (sync XHR via jQuery)
2. Parses with image-size library to get dimensions
3. Reads EXIF with piexifjs for orientation
4. Creates blob URL

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.

3. GIF to Video Conversion

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>.

4. Lazy Loading

<img loading="lazy" src={src} />

For LCP images (first visible), use loading="eager" and fetchpriority="high".

VRT Risks

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

Project-Specific Notes

• Images in application/public/images/
• GIFs in application/public/movies/ (183.7MB total)
• CoveredImage at client/src/components/foundation/CoveredImage.tsx
• PausableMovie at client/src/components/foundation/PausableMovie.tsx
• Images are loaded through useFetch(src, fetchBinary) → sync XHR
• After jQuery removal, images will load async — but component still does unnecessary processing