Image & Media Skills
Turn your AI coding assistant into an image and media expert with 8 specialized skills covering optimization, video, Sirv Media Viewer, 360 spins, REST APIs, AI Studio, ecommerce workflows, and dynamic imaging.
Image & Media Skills Pack
8 skills • One command install
npx skills add https://github.com/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
Product galleries, zoom, 360 spins, videos, 3D models, PDF galleries, thumbnails, accessibility
video-optimization
MP4/WebM/HLS delivery, posters, lazy loading, GIF replacement, facades, video Core Web Vitals
sirv-360-spin
Frame naming, .spin generation, product spin embeds, autospin, hotspots, video-to-spin conversion
sirv-ecommerce
Shopify image push, product sync, marketplace compliance, supplier intake, saved AI workflows
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 image optimization 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.
Interactive Product Media
Sirv Media Viewer guidance for mixed galleries, zoom, 360 spins, video, 3D models, smart .view galleries, mobile behavior, accessibility, and viewer performance.
Video Optimization
Web video delivery patterns for posters, autoplay loops, HLS, GIF-to-video replacement, YouTube/Vimeo facades, captions, and video-related LCP/CLS checks.
Ecommerce Workflows
Store-facing workflows for Shopify image pushes, marketplace readiness checks, supplier portal fixes, saved AI Studio pipelines, and product image review loops.
Install with one command:
npx skills add https://github.com/igorvaryvoda/image-optimization-skillThis installs all 8 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. Run the install command above, or open the GitHub repository and copy the folders from
skills/ - 2. Move the skill folders to your assistant's skills directory (e.g.,
~/.claude/skills/for Claude Code) - 3. The relevant skill activates automatically when you work on image, video, Sirv, product gallery, or ecommerce media 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-media-viewer
- • "Build a product gallery with zoom, video, and a 360 spin"
- • "Audit this Sirv Media Viewer embed for CLS and mobile behavior"
video-optimization
- • "Replace this large GIF with an optimized MP4/WebM loop"
- • "Optimize my hero video poster and loading strategy"
sirv-360-spin
- • "Name these frames so Sirv creates a .spin file"
- • "Convert a rotating product video into an interactive spin"
sirv-ecommerce
- • "Push this processed product image to Shopify safely"
- • "Run an Amazon main-image readiness loop"
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 skills, Markdown instruction folders, 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 Markdown skills or custom instruction files
Learn more about Claude Code at docs.anthropic.com
class="Sirv" container, add image, .spin, and video items with data-src, then verify zoom, drag, fullscreen, mobile behavior, and stable layout."
Will this work with my framework (Next.js, Astro, etc.)?
Yes! The image optimization 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 skills add https://github.com/igorvaryvoda/image-optimization-skill. This will replace the existing skills with the latest versions.
Do these skills 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 Markdown skill folders.
How does the skill activate?
Most AI coding assistants automatically load relevant skills based on context. When you ask about images, video, galleries, 360 spins, Sirv APIs, AI Studio, or ecommerce media workflows, the matching skill's knowledge is used to provide better answers.
What changed in the latest pack?
The pack now includes dedicated skills for Sirv Media Viewer, video optimization, Sirv 360 spins, and ecommerce product-media workflows, alongside the original image optimization, Sirv API, Sirv AI Studio, and dynamic imaging skills.
Explore more image optimization resources: