# Image Optimization

> Image formats, responsive images, lazy loading, and CDN integration.

- Skill: `a5c-ai/image-optimization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add a5c-ai/image-optimization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/a5c-ai/image-optimization/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: a5c-ai (https://skillmd.com/u/a5c-ai)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/a5c-ai/image-optimization

---


# 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

```tsx
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
  blurDataURL={blurData}
/>
```

## Responsive Images

```html
<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