home / skills / questnova502 / claude-skills-sync / baoyu-compress-image

baoyu-compress-image skill

/skills/baoyu-compress-image

This skill compresses images to WebP by default, with PNG preservation options, using system tools for fast, high-quality web-ready assets.

npx playbooks add skill questnova502/claude-skills-sync --skill baoyu-compress-image

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
4.4 KB
---
name: baoyu-compress-image
description: Cross-platform image compression skill. Converts images to WebP by default with PNG-to-PNG support. Uses system tools (sips, cwebp, ImageMagick) with Sharp fallback.
---

# Image Compressor

Cross-platform image compression with WebP default output, PNG-to-PNG support, preferring system tools with Sharp fallback.

## Script Directory

**Important**: All scripts are located in the `scripts/` subdirectory of this skill.

**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path

**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/main.ts` | CLI entry point for image compression |

## Quick Start

```bash
# Compress to WebP (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png

# Keep original format (PNG → PNG)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --format png

# Custom quality
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75

# Process directory
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
```

## Commands

### Single File Compression

```bash
# Basic (converts to WebP, replaces original)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png

# Custom output path
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -o compressed.webp

# Keep original file
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --keep

# Custom quality (0-100, default: 80)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75

# Keep original format
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png
```

### Directory Processing

```bash
# Process all images in directory
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/

# Recursive processing
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r

# With custom quality
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75
```

### Output Formats

```bash
# Plain text (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png

# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
```

## Options

| Option | Short | Description | Default |
|--------|-------|-------------|---------|
| `<input>` | | Input file or directory | Required |
| `--output <path>` | `-o` | Output path | Same path, new extension |
| `--format <fmt>` | `-f` | webp, png, jpeg | webp |
| `--quality <n>` | `-q` | Quality 0-100 | 80 |
| `--keep` | `-k` | Keep original file | false |
| `--recursive` | `-r` | Process directories recursively | false |
| `--json` | | JSON output | false |
| `--help` | `-h` | Show help | |

## Compressor Selection

Priority order (auto-detected):

1. **sips** (macOS built-in, WebP support since macOS 11)
2. **cwebp** (Google's official WebP tool)
3. **ImageMagick** (`convert` command)
4. **Sharp** (npm package, auto-installed by Bun)

The skill automatically selects the best available compressor.

## Output Format

### Text Mode (default)

```
image.png → image.webp (245KB → 89KB, 64% reduction)
```

### JSON Mode

```json
{
  "input": "image.png",
  "output": "image.webp",
  "inputSize": 250880,
  "outputSize": 91136,
  "ratio": 0.36,
  "compressor": "sips"
}
```

### Directory JSON Mode

```json
{
  "files": [...],
  "summary": {
    "totalFiles": 10,
    "totalInputSize": 2508800,
    "totalOutputSize": 911360,
    "ratio": 0.36,
    "compressor": "sips"
  }
}
```

## Examples

### Compress single image

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png
# photo.png → photo.webp (1.2MB → 340KB, 72% reduction)
```

### Compress with custom quality

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png -q 60
# photo.png → photo.webp (1.2MB → 280KB, 77% reduction)
```

### Keep original format

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts screenshot.png -f png --keep
# screenshot.png → screenshot-compressed.png (500KB → 380KB, 24% reduction)
```

### Process entire directory

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts ./screenshots/ -r
# Processed 15 files: 12.5MB → 4.2MB (66% reduction)
```

### Get JSON for scripting

```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json | jq '.ratio'
```

## Extension Support

Custom configurations via EXTEND.md.

**Check paths** (priority order):
1. `.baoyu-skills/baoyu-compress-image/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-compress-image/EXTEND.md` (user)

If found, load before workflow. Extension content overrides defaults.

Overview

This skill provides cross-platform image compression with WebP as the default output and optional PNG-to-PNG compression. It prefers native system tools (sips, cwebp, ImageMagick) and falls back to Sharp when needed. The CLI supports single files and directory recursion, with JSON output for automation.

How this skill works

The tool auto-detects available compressors in priority order (sips → cwebp → ImageMagick → Sharp) and uses the best available for each platform. You pass an input file or directory and it converts images to the requested format and quality, replacing or preserving originals depending on flags. Results are printed in human-readable text or emitted as JSON including sizes, ratio, and compressor used.

When to use it

  • Reduce image weight for faster web pages or smaller uploads
  • Batch-compress screenshots, assets, or image libraries with a single command
  • Convert PNGs to efficient WebP while optionally keeping original formats
  • Integrate into build scripts or CI by using JSON output
  • Process directories recursively to compress entire projects

Best practices

  • Test quality on a few representative images before bulk processing and choose quality (0–100) accordingly
  • Use JSON output for CI integration and to aggregate size savings programmatically
  • Keep originals when first running against a large or critical dataset (use --keep)
  • Prefer WebP for web delivery; use --format png or jpeg only when needed for compatibility
  • Run recursive processing on a copy or controlled folder to avoid accidental mass overwrite

Example use cases

  • Compress a single image to WebP at default quality: npx -y bun scripts/main.ts photo.png
  • Batch compress a screenshots folder recursively at quality 75: npx -y bun scripts/main.ts ./screenshots/ -r -q 75
  • Keep original PNGs while producing compressed PNGs: npx -y bun scripts/main.ts screenshot.png -f png --keep
  • Integrate into CI and read compression stats: npx -y bun scripts/main.ts image.png --json | jq '.'
  • Replace originals with WebP for a static site build to reduce total asset size

FAQ

What compressors does this use and how is one chosen?

It auto-detects available tools in this order: sips, cwebp, ImageMagick, then Sharp. The first available tool is selected for best performance on your system.

How do I preserve original files?

Use the --keep (or -k) flag to produce compressed outputs without deleting the original files.

Can I process entire directories and subfolders?

Yes. Provide a directory path and add --recursive (or -r) to traverse subdirectories. Use --json for machine-readable summaries.