A production-grade image optimization engine for AI Agents. Smartly routes between PNG quantization and WebP compression. Use this skill when working with images, optimizing assets, compressing photos, or preparing images for web deployment. Triggers on any image-related task including compression, optimization, format conversion, or build asset preparation.
The intelligent image optimization engine for AI Agents. Smart routing between PNG quantization and WebP compression.
The optimal compression strategy depends on the input content type and the target use case.
| Content Type | Primary Strategy | Toolchain | Target Format |
|---|---|---|---|
| Photographs | Lossy WebP | sharp -> webp | .webp |
| Graphics / Logos / UI | Optimized PNG | -> (palette) |
sharppng.png |
| Universal (Web) | WebP (High Compat) | sharp -> webp | .webp |
| SVG | SVGO Optimization | svgo | .svg |
Decision Logic:
This skill uses sharp (Node.js) for image compression and svgo for SVG optimization.
Install dependencies:
npm install --save-dev sharp svgo
The build automation script is located at:
scripts/compress-images.mjs
It is automatically run during npm run build via the Vite plugin configuration.
WebP (Photos/JPEG/PNG photos):
PNG (Graphics/Logos/UI):
SVG:
The compression runs automatically during vite build:
src/assets/images/ are compressed to WebP formatsrc/assets/logo/ are optimized with SVGOAlways verify:
npm run build and check dist/ output.