asset-optimization

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 specifications
• prototype-review: Optimize assets identified during design review
• handoff-manager: Prepare optimized assets for development handoff
• performance-profiling: Identify asset performance bottlenecks

Designer Pack Skills:

• design-system ← Design system asset alignment
• prototype-review ← Optimize assets from review
• asset-optimization ← You are here
• style-guide-generator ← Generate asset guidelines in style guides
• design-trend-analyzer ← Apply asset trends to optimization
• user-research ← Validate asset quality with users
• handoff-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

1. Over-compressing images: Find the right balance between size and quality
2. Ignoring modern formats: WebP and AVIF provide significant size reductions
3. Not considering responsive images: One size doesn't fit all devices
4. Forgetting accessibility: Provide alt text and accessible image formats
5. Manual optimization only: Build automated workflows to prevent regression
6. Ignoring asset organization: Poor organization leads to asset duplication and bloat
7. 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

1. Analyze current assets for size and performance
2. Identify largest assets and prioritize optimization
3. Compress images using optimal formats and quality settings
4. Resize images to appropriate dimensions
5. Optimize SVG icons and create icon sets
6. Organize assets with clear naming conventions
7. Measure performance improvement
8. Document optimization guidelines

Workflow 2: Advanced Asset Strategy

1. Conduct comprehensive asset performance audit
2. Create responsive image sets with art direction
3. Implement lazy loading for below-the-fold assets
4. Build automated optimization workflow
5. Configure CDN and caching strategies
6. Implement progressive image loading
7. Establish performance budgets
8. Monitor and iterate based on metrics

Workflow 3: Strategic Asset Management

1. Design centralized asset management system
2. Implement AI-powered optimization
3. Build dynamic asset generation pipeline
4. Optimize assets for all platforms (web, mobile, email, print)
5. Set up performance monitoring and alerting
6. Integrate with design system and component libraries
7. Build developer tooling and documentation
8. 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