image-optimization
✓Expert guidance on image optimization for web performance. Use when working with image formats (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), compression settings, responsive images, lazy loading, CDNs, Core Web Vitals, or any image-related web development task. Covers format selection, quality settings, srcset/sizes, picture element, art direction, fetchpriority, placeholder strategies (LQIP, blur-up, blurhash), container queries, HDR/wide color gamut, AI-powered image tools, edge/serverless processing, and performance optimization.
Installation
SKILL.md
| Photos | AVIF | WebP → JPEG | | Graphics/logos with transparency | SVG | WebP → PNG | | Photos with transparency | WebP | PNG | | Animations | WebP | GIF (or MP4 for long animations) | | Icons | SVG | WebP → PNG | | Screenshots | WebP | PNG |
| JPEG | 75-85 | 80 is sweet spot for photos | | WebP | 75-85 | More efficient than JPEG at same quality | | AVIF | 60-75 | Much more efficient, use lower numbers | | PNG | N/A | Lossless, optimize with tools like oxipng |
Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560
Expert guidance on image optimization for web performance. Use when working with image formats (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), compression settings, responsive images, lazy loading, CDNs, Core Web Vitals, or any image-related web development task. Covers format selection, quality settings, srcset/sizes, picture element, art direction, fetchpriority, placeholder strategies (LQIP, blur-up, blurhash), container queries, HDR/wide color gamut, AI-powered image tools, edge/serverless processing, and performance optimization. Source: igorvaryvoda/image-optimization-skill.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/igorvaryvoda/image-optimization-skill --skill image-optimization- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is image-optimization?
Expert guidance on image optimization for web performance. Use when working with image formats (WebP, AVIF, JPEG, PNG, GIF, SVG, HEIC, JPEG XL), compression settings, responsive images, lazy loading, CDNs, Core Web Vitals, or any image-related web development task. Covers format selection, quality settings, srcset/sizes, picture element, art direction, fetchpriority, placeholder strategies (LQIP, blur-up, blurhash), container queries, HDR/wide color gamut, AI-powered image tools, edge/serverless processing, and performance optimization. Source: igorvaryvoda/image-optimization-skill.
How do I install image-optimization?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/igorvaryvoda/image-optimization-skill --skill image-optimization Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/igorvaryvoda/image-optimization-skill
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01