image-optimizer

# Image Optimizer

## Workflow

### 1. Assessment → 2. Compression → 3. Verification

```yaml
Assess:
  - Find images: find public/images -size +500k
  - Check dimensions: sips -g pixelWidth -g pixelHeight [image]
  - Determine format: JPG for photos, PNG for graphics

Compress:
  - Resize: sips -Z 1920 [image.jpg]
  - Quality: sips -s formatOptions 75 [image.jpg]
  - Target: < 500KB per image

Verify:
  ✓ File size < 500KB
  ✓ Visual quality acceptable
  ✓ Proper format used
  ✓ Next.js Image component configured
```

## Compression Tools (macOS)

```bash
# Resize to max width 1920px
sips -Z 1920 image.jpg

# Compress JPEG (quality 75%)
sips -s formatOptions 75 image.jpg

# Convert PNG to JPEG
sips -s format jpeg image.png --out image.jpg

# Batch resize all JPEGs
sips -Z 1920 public/images/*.jpg

# Find large images (> 500KB)
find public/images -type f -size +500k
```

## Quick Example

### Compress Large Image (2.3MB → 420KB)
```bash
# 1. Check size & dimensions
ls -lh public/images/banner.jpg  # → 2.3MB
sips -g pixelWidth public/images/banner.jpg  # → 3840px

# 2. Resize to 1920px max width
sips -Z 1920 public/images/banner.jpg

# 3. Compress to quality 75%
sips -s formatOptions 75 public/images/banner.jpg

# 4. Verify
ls -lh public/images/banner.jpg  # → 420KB ✓
```

## Quality Standards

| Type | Target Size | Dimensions | Format |
|------|-------------|------------|--------|
| Banner | < 500KB | 1920x1080 | JPEG (quality 75-80%) |
| Thumbnail | < 100KB | 800x600 | JPEG |
| Icon/Logo | < 50KB | - | SVG (or PNG) |
| Background | < 300KB | 1920x1080 | JPEG |

**Quality Guidelines:**
- 75-80%: Standard (recommended)
- 80-85%: High quality (important images)
- < 75%: Thumbnails/backgrounds only

## Next.js Image Component

```tsx
// ✓ GOOD
import Image from 'next/image'

<Image
  src="/images/banner.jpg"
  alt="Descriptive alt text (not 'Image' or 'Banner')"
  width={1920}
  height={1080}
  priority={false}  // true for above-fold only
  quality={75}
/>

// ✗ BAD: Using regular img tag
<img src="/images/banner.jpg" alt="Banner" />
```

## Validation Checklist

```yaml
Before completing:
  □ Image size < 500KB
  □ Visual quality acceptable
  □ Dimensions appropriate (≤ 1920px width)
  □ Proper format (JPEG for photos, PNG for graphics)
  □ Next.js Image component used
  □ Alt text descriptive
  □ Width and height specified
```

## Common Mistakes

```yaml
❌ NEVER:
  - Compress below acceptable quality
  - Use regular <img> instead of Next.js Image
  - Omit alt text or use generic text ("Image", "Banner")
  - Skip width/height attributes

✅ ALWAYS:
  - Preserve aspect ratio when resizing
  - Verify file size after compression
  - Use descriptive alt text
  - Specify width and height
  - Use priority={true} for above-fold images only
```

---

**Version**: 1.0.0
**Target**: < 500KB per image
**Tool**: sips (macOS built-in)