image-optimization
Installation
SKILL.md
Image Optimization
Production image optimization patterns for modern web applications.
Overview
- Optimizing Largest Contentful Paint (LCP)
- Reducing page weight and bandwidth
- Implementing responsive images
- Adding blur placeholders for perceived performance
- Converting to modern formats (AVIF, WebP)
Core Patterns
1. Next.js Image Component
import Image from 'next/image';