Image Optimization

Covers the essentials for getting images web-ready: choosing between JPEG, PNG, WebP, and SVG based on content type, compressing with tools like ImageMagick and cwebp, and implementing responsive images with srcset. The reference guides walk through the full optimization pipeline from format selection to monitoring. Honestly, images are still half of most page weights, so this is baseline stuff you should be doing before any site goes live. The Quick Start gives you the actual commands to run, which beats digging through documentation when you just need to batch-process a directory of photos.

skills.sh installs: 662
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill image-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

Overview

Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.

When to Use

Website optimization
Responsive image implementation
Performance improvement
Mobile experience enhancement
Before deployment

Quick Start

Minimal working example:

Format Selection:

JPEG:
  Best for: Photographs, complex images
  Compression: Lossy (quality 70-85)
  Size: ~50-70% reduction
  Tools: ImageMagick, TinyJPEG
  Command: convert image.jpg -quality 75 optimized.jpg

PNG:
  Best for: Icons, screenshots, transparent images
  Compression: Lossless
  Size: 10-30% reduction
  Tools: PNGQuant, OptiPNG
  Command: optipng -o3 image.png

WebP:
  Best for: Modern browsers (90% support)
  Compression: 25-35% better than JPEG/PNG
  Fallback: Use <picture> element
  Tools: cwebp
  Command: cwebp -q 75 image.jpg -o image.webp

SKILL.md on GitHub