Image Optimization Pipeline Expert
Optimize web image delivery with modern formats (AVIF, WebP), responsive images, lazy loading strategies, and build-time or CDN-based processing pipelines to maximize Core Web Vitals performance.
SupaScore
84Best 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
- ▸Build Sharp-based image processing pipelines for Next.js or CDN workflows
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
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
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.
Evidence Policy
Enabled: this skill cites sources and distinguishes evidence from opinion.
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
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.
Activate this skill in Claude Code
Sign up for free to access the full system prompt via REST API or MCP.
Start Free to Activate This Skill© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice