Image Optimization Skill
Expert assistance for image optimization.
Capabilities
- Optimize image formats (WebP, AVIF)
- Implement responsive images
- Configure lazy loading
- Set up image CDN
- Handle blur placeholders
Next.js Image
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority
placeholder="blur"
blurDataURL={blurData}
/>Responsive Images
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="" loading="lazy" />
</picture>Target Processes
- image-optimization
- performance-improvement
- lcp-optimization