Image & Media Skills
Turn your AI coding assistant into an image expert with 4 specialized skills covering optimization, Sirv REST API, AI Studio, and dynamic imaging.
Image & Media Skills Pack
4 skills • One command install
npx add-skill IgorVaryvoda/image-optimization-skill image-optimization
Formats, compression, responsive images, Core Web Vitals, placeholder strategies, CDN patterns
sirv-api
REST API for uploads, metadata, search, async jobs, 360 spins, account management
AI background removal, upscaling, generation, 3D, video + MCP server for direct image processing
sirv-dynamic-imaging
URL-based transforms: resize, crop, effects, watermarks, text overlays, format conversion
Here's a preview of the quick reference tables included in the skill:
View Format Selection Guide
| Use Case | Best Format | Fallback |
|---|---|---|
| Photos | AVIF | WebP → JPEG |
| Graphics with transparency | SVG | WebP → PNG |
| Photos with transparency | WebP | PNG |
| Animations | WebP | GIF (or MP4) |
| Icons | SVG | WebP → PNG |
View Quality Settings Guide
| Format | Recommended Quality | Notes |
|---|---|---|
| JPEG | 75-85 | 80 is sweet spot for photos |
| WebP | 75-85 | More efficient than JPEG |
| AVIF | 60-75 | Much more efficient, use lower numbers |
| PNG | N/A | Lossless, use oxipng to optimize |
Image Formats Reference
Deep coverage of JPEG, PNG, WebP, AVIF, GIF, SVG, HEIC, JPEG XL. Includes compression algorithms, encoding options, browser support matrix, HDR & wide color gamut, and when to use each format.
Optimization Techniques
Quality settings for each format, lossy vs lossless compression, chroma subsampling, metadata handling, batch processing, automation pipelines, and practical SSIM/VMAF quality thresholds.
Responsive Images
Complete guide to srcset, sizes, picture element, art direction, density descriptors, container queries for images, and common responsive image patterns.
Performance Best Practices
Core Web Vitals optimization (LCP, CLS), fetchpriority attribute, lazy loading, preloading, placeholder strategies (LQIP, blur-up, blurhash), CDN caching, and performance budgets.
Tools Reference
CDN URL patterns (Sirv, Cloudinary, imgix, ImageEngine, Bunny CDN), AI tools (Sirv AI Studio), edge/serverless processing, CLI tools (ImageMagick, Sharp, cwebp, avifenc), and build tool integrations.
Install with one command using add-skill:
npx add-skill IgorVaryvoda/image-optimization-skillThis installs all 4 skills to your AI coding environment.
Enable direct image processing with the Sirv AI MCP server. Add to your MCP config (.mcp.json or equivalent):
{
"mcpServers": {
"sirv-ai": {
"command": "npx",
"args": ["-y", "sirv-ai-mcp-server"],
"env": {
"SIRV_AI_BASE_URL": "https://www.sirv.studio"
}
}
}
}Restart your AI assistant after adding. You'll authorize with your Sirv AI Studio account on first use.
- 1. Download the
.skillfile above - 2. Move it to your skills directory (e.g.,
~/.claude/skills/for Claude Code) - 3. The skill activates automatically when you work on image-related tasks
Once installed, your AI assistant will automatically use the relevant skill when you ask about:
image-optimization
- • "What format should I use for this hero image?"
- • "Set up responsive images with WebP fallback"
sirv-api
- • "Upload images to Sirv via their REST API"
- • "Search for all JPEGs uploaded this week"
sirv-ai-studio
- • "Remove backgrounds from product images in batch"
- • "Generate lifestyle scenes for my products"
sirv-dynamic-imaging
- • "Add a watermark to images via URL params"
- • "Create a Sirv profile for thumbnails"
These skills work with AI coding assistants that support the .skill format or custom instructions:
- • Claude Code - Anthropic's CLI tool
- • Cursor - AI code editor
- • Codex CLI - OpenAI's coding assistant
- • Antigravity - AI development environment
- • Other tools - Any AI assistant that reads .md or .skill files
Learn more about Claude Code at docs.anthropic.com
?watermark=/logo.png&watermark.position=southeast&watermark.scale.width=15%&watermark.opacity=40 to your image URL. You can also create a reusable profile at /Profiles/watermarked and use ?profile=watermarked on any image."
Will this work with my framework (Next.js, Astro, etc.)?
Yes! The skill includes framework-specific guidance for Next.js, Astro, Nuxt, Vite, Webpack, and more. It covers both native image components and manual optimization approaches.
How do I update to the latest version?
Re-run the install command: npx add-skill IgorVaryvoda/image-optimization-skill. This will replace the existing skills with the latest versions.
Does this skill work with other AI assistants?
Yes! While originally designed for Claude Code, these skills work with Cursor, Codex CLI, Antigravity, and any AI coding assistant that supports custom instructions or .skill/.md files.
How does the skill activate?
Most AI coding assistants automatically load relevant skills based on context. When you ask about image optimization, formats, responsive images, or related topics, the skill's knowledge is used to provide better answers.
Explore more image optimization resources: