About optimize-images
Optimize Images is a skill that processes JPG, JPEG, and PNG files in a specified directory for web delivery. It generates WebP sizes, square thumbnails, blur placeholders, and a size-savings report.
Key features
- 01Find JPG, JPEG, and PNG files
- 02Generate WebP images at multiple widths
- 03Create square thumbnails
- 04Generate base64 blur placeholders
- 05Report processed image and size totals
Use cases
- 01Preparing a public images directory for web delivery
- 02Generating responsive image variants
- 03Creating thumbnails and blur placeholders
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/optimize-imagesin Claude Code to confirm it loaded.
Details
From the project READMEOptimize Images
Optimize images in the specified directory for web delivery.
Arguments
$ARGUMENTS- Directory path containing images to optimize (default:./public/images)
Process
- Find all images:
find ${ARGUMENTS:-./public/images} -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \) - For each image, generate:
- WebP versions at 320w, 640w, 1280w, 1920w, 2560w
- Thumbnail at 150x150, 300x300
- Blur placeholder (10px width, base64)
Commands
# Install sharp-cli if not present
pnpm add -D sharp-cli
# Optimize single image example
npx sharp -i input.jpg -o output.webp --format webp --quality 80
# Generate srcset for an image
for size in 320 640 1280 1920 2560; do
npx sharp -i input.jpg -o "output-${size}w.webp" --resize $size --format webp --quality 80
done
# Generate thumbnail
npx sharp -i input.jpg -o thumb-150.webp --resize 150 150 --fit cover --format webp
# Generate blur placeholder
npx sharp -i input.jpg -o blur.webp --resize 10 --format webp --quality 20
Output
Report:
- Number of images processed
- Original total size
- Optimized total size
- Size savings percentage
Comments
Markdown supported