| name | asset-optimization |
| description | Optimize images, icons, and design assets for performance, quality, and developer handoff |
Design Asset Optimization
Purpose
Optimize images, icons, illustrations, and design assets for optimal performance, quality, and seamless developer handoff across web and mobile platforms.
Capabilities
🎯 Tier 1: Foundation
Basic Asset Optimization
Optimize design assets for web and mobile performance:
- Image Compression: Compress images without significant quality loss
- Format Selection: Choose optimal formats (WebP, AVIF, PNG, JPG, SVG) based on use case
- Size Optimization: Resize images to appropriate dimensions for target devices
- Icon Optimization: Optimize SVG icons and prepare icon sets
- Asset Organization: Organize assets with clear naming conventions and folder structure
- Export Settings: Configure export settings for optimal quality-to-size ratio
- Basic Performance Testing: Measure asset load times and file sizes
Example:
"Optimize these design assets for our website:
1. Compress 20 product images (currently 500KB average each)
2. Convert hero image to modern format (WebP or AVIF)
3. Optimize 50 SVG icons for performance
4. Create responsive image variants for mobile, tablet, desktop
5. Organize all assets with clear naming conventions
6. Measure total page load time improvement after optimization"
🚀 Tier 2: Advanced
Advanced Asset Strategies
Implement sophisticated asset optimization and delivery strategies:
- Lazy Loading Strategy: Plan and implement lazy loading for images and assets
- Responsive Image Sets: Create comprehensive responsive image sets with art direction
- CDN Optimization: Optimize assets for CDN delivery and caching strategies
- Progressive Loading: Implement progressive image loading for perceived performance
- Asset Versioning: Implement asset versioning and cache busting strategies
- Automated Workflows: Build automated optimization workflows and CI/CD integration
- Performance Budgets: Establish and enforce performance budgets for assets
- Advanced Formats: Implement next-gen formats (WebP2, AVIF, JPEG XL) with fallbacks
Example:
"Our product page loads 3MB of images and has 4-second load time. Help me:
1. Analyze current asset performance and identify bottlenecks
2. Create a responsive image strategy with art direction for 3 breakpoints
3. Implement lazy loading for below-the-fold images
4. Set up automated asset optimization workflow in CI/CD
5. Configure CDN caching and delivery strategies
6. Implement progressive JPEG loading for hero images
7. Establish a 2MB performance budget for all product pages
8. Create fallback strategies for next-gen image formats"
🌟 Tier 3: Anticipatory
Strategic Asset Management
Build comprehensive asset management and optimization systems:
- Asset Management System: Design and build centralized asset management system
- AI-Powered Optimization: Implement AI-powered image optimization and auto-scaling
- Dynamic Asset Generation: Build systems for dynamic asset generation and transformation
- Cross-Platform Optimization: Optimize assets for web, mobile, email, and print
- Performance Monitoring: Set up continuous performance monitoring and alerting
- Design System Integration: Integrate assets with design system and component libraries
- Developer Experience: Create developer tooling and documentation for asset usage
- Asset Analytics: Track asset usage, performance, and optimization ROI
Example:
"We manage 10,000+ assets across 5 products and need a comprehensive strategy. Help me:
1. Design a centralized asset management system (DAM) with versioning
2. Build AI-powered image optimization that automatically compresses and formats
3. Create dynamic asset generation pipeline (resize, crop, format conversion)
4. Optimize assets for web, mobile apps, email templates, and print materials
5. Set up performance monitoring with real-time alerts for asset bloat
6. Integrate assets with design system and component libraries
7. Build developer tooling (CLI, SDK, documentation) for asset integration
8. Implement asset analytics to track usage, performance, and optimization ROI
9. Create governance policies and workflows for asset management"
Integration
Works Best With:
design-system: Ensure assets align with design system specificationsprototype-review: Optimize assets identified during design reviewhandoff-manager: Prepare optimized assets for development handoffperformance-profiling: Identify asset performance bottlenecks
Designer Pack Skills:
design-system ← Design system asset alignmentprototype-review ← Optimize assets from reviewasset-optimization ← You are herestyle-guide-generator ← Generate asset guidelines in style guidesdesign-trend-analyzer ← Apply asset trends to optimizationuser-research ← Validate asset quality with usershandoff-manager ← Hand off optimized assets to development
Best Practices
✅ DO:
- Start with the biggest wins: Focus on largest assets first for maximum impact
- Measure before and after: Always quantify performance improvements
- Consider user context: Optimize for device types, network conditions, and user locations
- Use progressive enhancement: Provide fallbacks for browsers that don't support modern formats
- Automate where possible: Build automated workflows to catch unoptimized assets
- Document optimization decisions: Create guidelines for consistent optimization
- Balance quality and size: Find the optimal quality-to-size ratio for each use case
❌ DON'T:
- Over-optimize: Don't sacrifice quality beyond what's necessary
- Ignore context: Optimize for actual use cases, not theoretical scenarios
- Forget accessibility: Ensure alt text and accessible formats are provided
- Skip testing: Test optimized assets across browsers and devices
- Neglect maintenance: Regularly audit and re-optimize assets as technology evolves
- Ignore the 80/20 rule: Focus on the 20% of assets that provide 80% of the impact
- Build one-off solutions: Create scalable, repeatable optimization workflows
Common Mistakes
- Over-compressing images: Find the right balance between size and quality
- Ignoring modern formats: WebP and AVIF provide significant size reductions
- Not considering responsive images: One size doesn't fit all devices
- Forgetting accessibility: Provide alt text and accessible image formats
- Manual optimization only: Build automated workflows to prevent regression
- Ignoring asset organization: Poor organization leads to asset duplication and bloat
- Not measuring impact: Always quantify performance improvements
Quick Commands
Get Started:
- "Optimize these images for web performance"
- "Compress these icons and create icon set"
- "Create responsive image variants for these photos"
Advanced:
- "Analyze our page load performance and optimize assets"
- "Set up automated asset optimization workflow"
- "Implement lazy loading for our image gallery"
Expert:
- "Design a centralized asset management system"
- "Build AI-powered asset optimization pipeline"
- "Create asset analytics and performance monitoring system"
Example Workflows
Workflow 1: Basic Asset Optimization
- Analyze current assets for size and performance
- Identify largest assets and prioritize optimization
- Compress images using optimal formats and quality settings
- Resize images to appropriate dimensions
- Optimize SVG icons and create icon sets
- Organize assets with clear naming conventions
- Measure performance improvement
- Document optimization guidelines
Workflow 2: Advanced Asset Strategy
- Conduct comprehensive asset performance audit
- Create responsive image sets with art direction
- Implement lazy loading for below-the-fold assets
- Build automated optimization workflow
- Configure CDN and caching strategies
- Implement progressive image loading
- Establish performance budgets
- Monitor and iterate based on metrics
Workflow 3: Strategic Asset Management
- Design centralized asset management system
- Implement AI-powered optimization
- Build dynamic asset generation pipeline
- Optimize assets for all platforms (web, mobile, email, print)
- Set up performance monitoring and alerting
- Integrate with design system and component libraries
- Build developer tooling and documentation
- Implement asset analytics and governance policies
Success Criteria
✅ Tier 1 Success: Assets are optimized and page load times improve measurably
✅ Tier 2 Success: Automated optimization workflows prevent asset bloat and performance regression
✅ Tier 3 Success: Comprehensive asset management system enables team autonomy and consistent optimization across all products
Session Requirements
- Minimum Session: session-16
- Recommended Session: session-17 for Tier 2, session-18+ for Tier 3
- Prerequisites: Understanding of image formats, compression techniques, and web performance principles
