image-optimization · aj-geddes — Claude Code skill: shrink images for the web
A skill that walks your agent through compressing images and picking modern formats. Useful before a deploy, when pages drag on mobile networks.
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a claude-codeWhat image-optimization does
The skill covers format choice by job. JPEG for photos with lossy compression, PNG for icons and screenshots, SVG for simple graphics. WebP gets its own section: better size than JPEG or PNG, with a <picture> fallback for older browsers.
There is a short starting example with convert, optipng and cwebp, and four deeper guides live in the references/ directory: compression and formats, responsive images, the optimization process, monitoring. Your agent opens the file it needs and applies the steps to your project.
Nothing runs on its own here, and the skill does not check whether the tools exist. If ImageMagick, PNGQuant or cwebp are missing from the machine, the example commands fail — worth checking your environment before asking the agent to touch assets.
What it helps with
- compress photos for the web without visible quality loss
- pick a format for icons, screenshots and logos
- move images to WebP with a fallback for older browsers
- set up responsive images at several sizes per screen
- sweep asset folders before shipping to production
Example prompts for the agent
- go through
public/imagesand tell me what to compress and convert - pick a format and command for the logo and icons in
assets/ - show me how to set up responsive images for a product card
How to install image-optimization
1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a claude-code2Manually: put the files in place
~/.claude/skills/image-optimization/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/image-optimization/
1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a codex2Manually: put the files in place
.agents/skills/image-optimization/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a cursor2Manually: put the files in place
.cursor/skills/image-optimization/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install aj-geddes/useful-ai-prompts image-optimization2Manually: put the files in place
.github/skills/image-optimization/SKILL.md1Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a gemini-cli2Platform CLI
gemini skills install https://github.com/aj-geddes/useful-ai-prompts --path skills/image-optimizationManually: put the files in place
.devin/skills/image-optimization/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about image-optimization
How do I install image-optimization in Claude?
Run npx skills add aj-geddes/useful-ai-prompts --skill image-optimization -a claude-code. The skill file then lands at ~/.claude/skills/image-optimization/SKILL.md.
What does image-optimization do?
It guides the agent through choosing an image format and compression method for the web, and through serving responsive images at different screen sizes.
Does the skill need external tools?
The examples use ImageMagick, PNGQuant, OptiPNG and cwebp. The skill does not install them, so check that the tool you need is present.
Source text
SKILL.md · MIT
--- name: image-optimization description: > Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading. --- # Image Optimization ## Table of Contents - [Overview](#overview) - [When to Use](#when-to-use) - [Quick Start](#quick-start) - [Reference Guides](#reference-guides) - [Best Practices](#best-practices) ## Overview Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks. ## When to Use - Website optimization - Responsive image implementation - Performance improvement - Mobile experience enhancement - Before deployment ## Quick Start Minimal working example: ```yaml 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) ``` ## Reference Guides Detailed implementations in the `references/` directory: | Guide | Contents | |---|---| | [Image Compression & Formats](references/image-compression-formats.md) | Image Compression & Formats | | [Responsive Images](references/responsive-images.md) | Responsive Images | | [Optimization Process](references/optimization-process.md) | Optimization Process | | [Monitoring & Best Practices](references/monitoring-best-practices.md) | Monitoring & Best Practices | ## Best Practices ### ✅ DO - Follow established patterns and conventions - Write clean, maintainable code - Add appropriate documentation - Test thoroughly before deploying ### ❌ DON'T - Skip testing or validation - Ignore error handling - Hard-code configuration values
© aj-geddes · MIT · aj-geddes/useful-ai-prompts
Similar skills
Everything for Frontend and UI →image-optimization by other authors comes first.
