image-optimizer

name	image-optimizer
description	Optimize images to WebP format. Scans a directory, converts jpg/png/gif/bmp/tiff to WebP using sharp, reports compression results. Run with input/output path arguments.
argument-hint	[input directory] [optional: output directory]

Image Optimizer

Convert project images to WebP. Uses the bundled optimize-images.js script with sharp.

When to Use

• After adding new images to the project
• Before deployment to reduce asset size
• When Lighthouse flags image optimization
• Pre-optimized WebP avoids Next.js build-time conversion overhead

Procedure

1. Determine paths

• If $ARGUMENTS provides paths, use them
• Otherwise scan for common image directories: public/images/, public/assets/, src/assets/, assets/
• Ask: "Replace originals or save to separate directory?"

2. Ensure sharp is available

node -e "require('sharp')" 2>/dev/null || npm install --no-save sharp

3. Run the optimizer

The script is at .claude/skills/image-optimizer/optimize-images.js:

# Replace originals with WebP
node .claude/skills/image-optimizer/optimize-images.js public/images

# Separate output directory
node .claude/skills/image-optimizer/optimize-images.js public/images public/images-webp

# Custom quality (90) and max dimensions (2560x1440)
node .claude/skills/image-optimizer/optimize-images.js public/images public/images 90 2560 1440

Argument	Default	Description
input_dir	(required)	Directory to scan for images
output_dir	same as input	Where to write WebP files. Same dir = replace originals
quality	80	WebP quality 1-100
max_width	1920	Downscale wider images (no upscaling)
max_height	1080	Downscale taller images (no upscaling)

4. Update source references

After conversion, find and replace old image references:

grep -rn "\.png\|\.jpg\|\.jpeg" --include="*.tsx" --include="*.ts" --include="*.css" src/ app/

Replace .png / .jpg extensions with .webp in source code.

5. Verify

npx tsc --noEmit   # or npx next build

Notes

• Supported inputs: jpg, jpeg, png, gif, bmp, tiff
• Animated GIFs lose animation in WebP — warn user before converting
• Sharp is the same library Next.js uses internally