Optimize Image Web

Optimize Image for Web

Convert images to optimized WebP format with size presets for icons, social cards, and thumbnails.

When to Use

• User needs to optimize images for web performance
• User asks for favicon or icon set generation
• User needs og:image or twitter card images
• User wants to resize and compress images
• User mentions WebP conversion
• User needs thumbnails at specific sizes

Requirements

No API keys required. Uses Pillow for image processing.

Commands

Convert Single Image

./scripts/optimize_image convert image.png -w 800 -q 85

Generate Preset Sizes

./scripts/optimize_image preset image.png favicon
./scripts/optimize_image preset logo.png icon-set
./scripts/optimize_image preset hero.jpg og

Show Image Info

./scripts/optimize_image info image.png

List Available Presets

./scripts/optimize_image presets

Options

convert

| Option | Description | |--------|-------------| | -o, --output | Output path (default: same name .webp) | | -w, --width | Target width in pixels | | -h, --height | Target height in pixels | | -q, --quality | WebP quality 1-100 (default: 85) | | -f, --format | Output: json (default) or files |

preset

| Option | Description | |--------|-------------| | -o, --output-dir | Output directory | | -p, --prefix | Filename prefix | | -q, --quality | WebP quality 1-100 (default: 85) | | -f, --format | Output: json (default) or files |

Presets

| Preset | Sizes | Use Case | |--------|-------|----------| | favicon | 16, 32, 48 | Browser favicons | | icon-set | 16-512 | Full icon set for PWA/apps | | og | 1200x630 | Open Graph (Facebook, LinkedIn) | | twitter | 1200x675 | Twitter cards | | social | og + twitter | All social platforms | | thumb | 150x150 | Small thumbnails | | thumb-lg | 300x300 | Large thumbnails |

Output Format

Default JSON for LLM parsing:

{
  "input": "logo.png",
  "preset": "icon-set",
  "original": {"width": 1024, "height": 1024},
  "outputs": [
    {"path": "logo-16x16.webp", "width": 16, "height": 16, "size_kb": 0.5},
    {"path": "logo-32x32.webp", "width": 32, "height": 32, "size_kb": 1.2}
  ],
  "quality": 85
}

Examples

Optimize hero image for web:

./scripts/optimize_image convert hero.jpg -w 1920 -q 80

Generate favicons from logo:

./scripts/optimize_image preset logo.png favicon -o ./public

Generate social media cards:

./scripts/optimize_image preset banner.png social -o ./assets

Generate icon set for PWA:

./scripts/optimize_image preset icon.png icon-set -o ./public/icons -p app

Check original image details:

./scripts/optimize_image info photo.jpg

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: nc9
• Source: nc9/skills
• License: MIT

Install and usage instructions live in the source repository linked above.