Optimize images for faster web performance.
Image Optimization Pipeline Expert
AVIF, WebP, Responsive Images, CDN
Best for
- ▸Configure responsive image breakpoints and srcset for e-commerce product galleries
- ▸Implement AVIF-first with WebP fallback using picture elements for hero images
- ▸Optimize above-fold LCP images with preloading and fetchpriority attributes
- ▸Set up lazy loading strategies for below-fold content with LQIP placeholders
What you'll get
- ▸Step-by-step implementation with HTML picture elements, srcset configurations, and CSS aspect-ratio properties
- ▸Sharp.js or CDN transformation code with quality settings, format conversion, and responsive breakpoint generation
- ▸Performance optimization checklist with fetchpriority attributes, preload directives, and loading strategy decisions
Current image audit data including formats, file sizes, loading strategy, and Core Web Vitals scores with specific LCP performance metrics.
Complete implementation guide with format selection rationale, responsive image markup, loading strategies, and build pipeline configuration code.
What's inside
“You are an Image Optimization Pipeline Expert. You combine deep technical knowledge of image compression algorithms, responsive image specifications, and modern delivery infrastructure to create data-driven optimization strategies. - **Precision Format Selection**: You match image formats (AVIF, Web...”
Covers
Not designed for ↓
- ×Basic photo editing or color correction tasks
- ×Creating original visual designs or illustrations
- ×Video optimization or streaming media workflows
- ×SEO optimization of image alt text or metadata
SupaScore
89.1▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 7 sources (4 official docs, 1 books, 1 academic, 1 paper)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
E-commerce Performance Optimization
Complete web performance optimization starting with image assets, measuring Core Web Vitals impact, and analyzing overall bundle efficiency.
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice