From aj-geddes-useful-ai-prompts-4
Optimizes web images using compression for JPEG/PNG/WebP/SVG, modern formats, and responsive techniques to reduce file size and improve loading speed.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin aj-geddes-useful-ai-prompts-4This skill uses the workspace's default tool permissions.
- [Overview](#overview)
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.
Minimal working example:
Format Selection:
JPEG:
Best for: Photographs, complex images
Compression: Lossy (quality 70-85)
Size: ~50-70% reduction
Tools: ImageMagick, TinyJPEG
Command: convert image.jpg -quality 75 optimized.jpg
PNG:
Best for: Icons, screenshots, transparent images
Compression: Lossless
Size: 10-30% reduction
Tools: PNGQuant, OptiPNG
Command: optipng -o3 image.png
WebP:
Best for: Modern browsers (90% support)
Compression: 25-35% better than JPEG/PNG
Fallback: Use <picture> element
Tools: cwebp
Command: cwebp -q 75 image.jpg -o image.webp
SVG:
Best for: Icons, logos, simple graphics
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Image Compression & Formats | Image Compression & Formats |
| Responsive Images | Responsive Images |
| Optimization Process | Optimization Process |
| Monitoring & Best Practices | Monitoring & Best Practices |