What problem does it solve?
Large, unoptimized images, sounds, and other media assets significantly increase page load times, especially on mobile networks, leading to poor user experience. This Skill provides a comprehensive guide to optimizing all types of assets, ensuring fast loading and high performance across all devices.
Core Features & Use Cases
- Image Optimization: Guides on compression (TinyPNG, Squoosh), modern formats (WebP with fallbacks), responsive images (
srcset), and lazy loading, drastically reducing file sizes.
- Audio Optimization: Recommends optimal bitrates (96-128 kbps), multiple formats (MP3, OGG), and preloading for critical sounds, ensuring fast audio delivery.
- Sprite & Icon Optimization: Advises on combining sprites into sheets and using SVG for scalable icons to reduce HTTP requests and improve rendering efficiency.
- Use Case: Before adding a new set of background images or sound effects, activate this Skill to ensure they are properly optimized. It will guide you to compress them, convert to WebP, and implement lazy loading, guaranteeing they don't slow down your application.
Quick Start
1. Compress images using TinyPNG or Squoosh (web tools).
2. Convert images to WebP format with PNG/JPG fallbacks.
3. For responsive images, use srcset:
<img srcset="image-1x.webp 1x, image-2x.webp 2x" src="image.png" alt="Description">
# 4. For lazy loading:
<img src="image.jpg" loading="lazy" alt="Description">
# 5. Analyze asset performance:
npm run assets:analyze
