Get the FREE Ultimate OpenClaw Setup Guide →

compress-images

Scanned
npx machina-cli add skill rameerez/claude-code-startup-skills/compress-images --openclaw
Files (1)
SKILL.md
3.7 KB

Image Compression Skill

Compress all images in $ARGUMENTS (or app/assets/images/content/ if no path provided) to WebP format, optimized for SEO performance (target: under 100KB per image).

Process

  1. Create originals folder - Create originals/ subfolder inside the target directory and move source files there. Never destroy source files.
  2. Compress each image (JPG, PNG, GIF) from originals/ to the parent directory as .webp
  3. Iterate until all images are under 100KB - check sizes after each pass, re-compress any that exceed the target
  4. Report results with before/after sizes
  5. Update references in content files from old extensions to .webp

File Structure

target-directory/
├── originals/           # High-quality source files preserved here
│   ├── hero.jpg
│   └── feature.png
├── hero.webp            # Compressed, web-optimized
└── feature.webp

Iterative Compression Algorithm

IMPORTANT: Keep compressing until ALL images are under 100KB. Check sizes after each pass and re-compress any that exceed the target.

Step 1: Initial pass (q 70)

cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp
ls -lh image.webp  # Check size

Step 2: If still over 100KB, reduce quality progressively

# Try these in order until under 100KB:
cwebp -q 60 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 50 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 45 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 40 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 35 -resize 1200 0 originals/image.jpg -o image.webp

Step 3: For stubborn images, also reduce dimensions

# If q 35 at 1200px is still over 100KB, reduce to 1000px:
cwebp -q 30 -resize 1000 0 originals/image.jpg -o image.webp
cwebp -q 25 -resize 1000 0 originals/image.jpg -o image.webp

Real-World Results (Reference)

From actual compression run on content images:

ImageOriginalFirst TryFinalSettings Used
waves.jpg198KB33KB33KBq 70, 1200px (1 pass)
calendar.jpg246KB42KB42KBq 70, 1200px (1 pass)
floating.jpg230KB43KB43KBq 70, 1200px (1 pass)
cash.jpg409KB88KB88KBq 70, 1200px (1 pass)
knot.jpg395KB96KB96KBq 70, 1200px (1 pass)
floating-dark.jpg414KB94KB94KBq 70, 1200px (1 pass)
keyboard2.jpg459KB102KB102KBq 70, 1200px (1 pass, acceptable)
perpetual.jpg565KB130KB96KBq 40, 1200px (3 passes)
keyboard.jpg718KB196KB98KBq 25, 1000px (5 passes)

Key Insights

  1. Most images (under 500KB source) compress fine with default settings (q 70, 1200px)
  2. Large detailed images (500KB+) often need multiple passes
  3. Very large images (700KB+) may need both lower quality AND smaller dimensions
  4. Keyboard/tech photos with fine detail are hardest to compress - expect 4-5 passes
  5. Soft/blurry images compress much better than sharp detailed ones

After Compression

  1. Verify ALL files under 100KB: ls -lh *.webp - re-run compression on any exceeding target
  2. Update content files referencing old extensions (.jpg, .png) to use .webp
  3. Test that images render correctly in the application
  4. Original files remain in originals/ folder for future reference or re-compression

Source

git clone https://github.com/rameerez/claude-code-startup-skills/blob/main/skills/compress-images/SKILL.mdView on GitHub

Overview

Compress all images (JPG, PNG, GIF) into WebP using cwebp, aiming for under 100KB per image to boost page load times and SEO. Originals are preserved in an originals/ folder, and references are updated to .webp after compression.

How This Skill Works

The workflow creates an originals/ folder inside the target directory to keep high‑quality sources. It then converts each image from originals/ to the parent directory as .webp, iterating with quality and dimension adjustments until every image is under 100KB. After finishing, it reports before/after sizes and updates references in content files to use .webp.

When to Use It

  • You need faster page loads and better SEO by delivering smaller image assets.
  • You want to reduce image file sizes without sacrificing too much quality.
  • You plan to convert JPG/PNG/GIF images to WebP for modern browsers.
  • You must preserve the original source files by moving them to an originals/ folder.
  • You require a repeatable workflow that reports results and updates references to .webp.

Quick Start

  1. Step 1: Create an originals/ folder in the target directory and move source images there, preserving originals.
  2. Step 2: Convert images to WebP with an initial pass (e.g., cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp) and check sizes.
  3. Step 3: If any image is over 100KB, re-compress with lower quality or smaller dimensions, then update references to .webp and verify rendering.

Best Practices

  • Always move sources to an originals/ subfolder before compressing; never delete originals.
  • Compress all images from originals/ to .webp in the parent directory.
  • Iterate until every image is under 100KB, adjusting quality and dimensions as needed.
  • Record and review before/after sizes to confirm savings.
  • Update all content references from old extensions to .webp after compression.

Example Use Cases

  • waves.jpg: 198KB → 33KB after first pass (q70, 1200px, 1 pass)
  • calendar.jpg: 246KB → 42KB after first pass (q70, 1200px, 1 pass)
  • floating.jpg: 230KB → 43KB after first pass (q70, 1200px, 1 pass)
  • cash.jpg: 409KB → 88KB after first pass (q70, 1200px, 1 pass)
  • knot.jpg: 395KB → 96KB after first pass (q70, 1200px, 1 pass)

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗