Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
freestylefly avatar

Canghe Compress Image

  • 464 installs
  • 424 repo stars
  • Updated June 8, 2026
  • freestylefly/canghe-skills

canghe-compress-image is an agent skill that compresses and optimizes images for developers who need faster-loading web, mobile, and content-pipeline assets without visible quality degradation.

About

canghe-compress-image from freestylefly/canghe-skills is an agent skill focused on compressing and optimizing raster images before they ship to web pages, mobile applications, or automated content pipelines. The workflow targets smaller file sizes and improved load metrics while preserving perceptual quality for hero banners, thumbnails, icons, and editorial imagery. Developers invoke it when build artifacts or CMS uploads are too heavy, Lighthouse flags oversized images, or CDN bandwidth needs trimming ahead of a release. The skill fits into frontend and mobile delivery paths where manual batch tools are slow or inconsistently applied across a repo. Expect guidance and execution around lossy and lossless optimization choices, format selection, and batch processing of image directories rather than vector or video transcoding.

  • Lossy and lossless compression workflows
  • Batch resize and format conversion
  • Preserves visual quality targets
  • Cuts page weight and CDN costs
  • Ready for web and mobile asset pipelines

Canghe Compress Image by the numbers

  • 464 all-time installs (skills.sh)
  • Ranked #413 of 1,337 Generative Media skills by installs in the Skillselion catalog
  • Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/freestylefly/canghe-skills --skill canghe-compress-image

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs464
repo stars424
Last updatedJune 8, 2026
Repositoryfreestylefly/canghe-skills

How do you compress images for faster web loading?

Compress and optimize images before publishing to web pages, mobile apps, or content pipelines so assets load faster without visible quality loss.

Who is it for?

Developers preparing image-heavy frontends or mobile builds who need agent-driven compression before publish or CI asset upload.

Skip if: Teams optimizing video streams, vector SVG workflows only, or backend-only services with no static image assets.

When should I use this skill?

User asks to compress images, optimize PNG or JPEG assets, reduce image payload, or improve page load from heavy media files.

What you get

Optimized image files with reduced byte size suitable for web, mobile, and content CDN deployment.

  • Compressed image files
  • Reduced static asset payloads

Files

SKILL.mdMarkdownGitHub ↗

Image Compressor

Compresses images using best available tool (sips → cwebp → ImageMagick → Sharp).

Script Directory

Scripts in scripts/ subdirectory. Replace ${SKILL_DIR} with this SKILL.md's directory path.

ScriptPurpose
scripts/main.tsImage compression CLI

Preferences (EXTEND.md)

Use Bash to check EXTEND.md existence (priority order):

# Check project-level first
test -f .canghe-skills/canghe-compress-image/EXTEND.md && echo "project"

# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.canghe-skills/canghe-compress-image/EXTEND.md" && echo "user"

┌────────────────────────────────────────────────────────┬───────────────────┐ │ Path │ Location │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ .canghe-skills/canghe-compress-image/EXTEND.md │ Project directory │ ├────────────────────────────────────────────────────────┼───────────────────┤ │ $HOME/.canghe-skills/canghe-compress-image/EXTEND.md │ User home │ └────────────────────────────────────────────────────────┴───────────────────┘

┌───────────┬───────────────────────────────────────────────────────────────────────────┐ │ Result │ Action │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Found │ Read, parse, apply settings │ ├───────────┼───────────────────────────────────────────────────────────────────────────┤ │ Not found │ Use defaults │ └───────────┴───────────────────────────────────────────────────────────────────────────┘

EXTEND.md Supports: Default format | Default quality | Keep original preference

Usage

npx -y bun ${SKILL_DIR}/scripts/main.ts <input> [options]

Options

OptionShortDescriptionDefault
<input>File or directoryRequired
--output-oOutput pathSame path, new ext
--format-fwebp, png, jpegwebp
--quality-qQuality 0-10080
--keep-kKeep originalfalse
--recursive-rProcess subdirsfalse
--jsonJSON outputfalse

Examples

# Single file → WebP (replaces original)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png

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

# Directory recursive
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75

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

Output:

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

Extension Support

Custom configurations via EXTEND.md. See Preferences section for paths and supported options.

Related skills

How it compares

Use canghe-compress-image for pre-publish raster tuning; pair with build-time bundler plugins when optimization must be fully automated in CI.

FAQ

What assets does canghe-compress-image optimize?

canghe-compress-image optimizes raster images destined for web pages, mobile apps, and content pipelines—reducing byte size while aiming to avoid visible quality loss before publish.

When should developers run canghe-compress-image?

canghe-compress-image belongs in pre-ship workflows when Lighthouse, bundle size, or CDN cost flags oversized PNG, JPEG, or similar static images across a frontend or mobile release.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.