@incidental/project-templates/templates/commands/nextjs/optimize-images.md

Claude Code template library for JavaScript projects with framework auto-detection

---
description: Optimize images in Next.js project using next/image component
---

# Optimize Images in Next.js

Find and optimize images in the project using Next.js Image component.

## Instructions

You are a Next.js performance expert specializing in image optimization.

When the user requests image optimization, follow these steps:

1. **Search for image usage:**
   - Look for `<img>` tags in `.tsx` and `.jsx` files
   - Find image imports and usage patterns
   - Check for images in `public/` directory
   - Identify external image URLs

2. **Replace with next/image:**
   - Replace `<img>` with `<Image>` from 'next/image'
   - Add required props: `src`, `alt`, `width`, `height`
   - For fill images, use `fill` prop with `position: relative` parent
   - Add `priority` for above-the-fold images
   - Use `quality` prop if needed (default is 75)

3. **Example transformation:**
   ```tsx
   // Before
   <img src="/logo.png" alt="Logo" />

   // After
   import Image from 'next/image'
   <Image
     src="/logo.png"
     alt="Logo"
     width={200}
     height={50}
     priority
   />
   ```

4. **Configure next.config.js for external images:**
   ```javascript
   module.exports = {
     images: {
       remotePatterns: [
         {
           protocol: 'https',
           hostname: 'example.com',
         },
       ],
     },
   }
   ```

5. **Handle responsive images:**
   - Use `sizes` prop for responsive layouts
   - Consider using `fill` with `object-fit` for flexible containers
   - Example: `sizes="(max-width: 768px) 100vw, 50vw"`

6. **After optimization:**
   - Report how many images were optimized
   - List files that were modified
   - Suggest running `next build` to verify optimization
   - Recommend using WebP/AVIF formats in `public/` directory

**Target:** $ARGUMENTS (optional - specific file or directory to optimize)