--- name: image-optimization description: Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading. --- # Image Optimization ## Overview Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks. ## When to Use - Website optimization - Responsive image implementation - Performance improvement - Mobile experience enhancement - Before deployment ## Instructions ### 1. **Image Compression & Formats** ```yaml Format Selection: JPEG: Best for: Photographs, complex images Compression: Lossy (quality 70-85) Size: ~50-70% reduction Tools: ImageMagick, TinyJPEG Command: convert image.jpg -quality 75 optimized.jpg PNG: Best for: Icons, screenshots, transparent images Compression: Lossless Size: 10-30% reduction Tools: PNGQuant, OptiPNG Command: optipng -o3 image.png WebP: Best for: Modern browsers (90% support) Compression: 25-35% better than JPEG/PNG Fallback: Use

image-optimization

Install this skill

Comments