
Image Processing
Resize, convert, trim, optimize, thumbnail, and generate OG card images for web shipping using the bundled img-process CLI or custom Pillow scripts.
Overview
Image Processing is an agent skill for the Build phase that resizes, converts, trims, optimizes, and generates web images via img-process and Pillow.
Install
npx skills add https://github.com/jezweb/claude-skills --skill image-processingWhat is this skill?
- Bundled img-process CLI: resize, convert, trim, thumbnail, optimise, og-card, and batch
- Pillow-based pipeline—no ImageMagick dependency
- Documented triggers: resize image, convert to webp, trim logo, optimise images, OG image, crop whitespace
- Standard jobs use CLI; compositing, watermarks, or complex layouts fall back to generated scripts
- Batch convert/optimise across folders for asset pipelines
- Seven img-process command families documented: resize, convert, trim, thumbnail, optimise, og-card, batch
Adoption & trust: 1.7k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your repo has oversized PNGs, missing WebP variants, sloppy logo crops, or no OG image, and manual GUI tools slow every deploy prep.
Who is it for?
Indie devs polishing marketing pages, app UI assets, and social previews from the terminal during a build sprint.
Skip if: Heavy creative retouching, video pipelines, or teams standardized on ImageMagick-only ops without Python.
When should I use this skill?
User asks to resize image, convert to webp, trim logo, optimise images, make thumbnail, create OG image, crop whitespace, process image, or notes image too large.
What do I get? / Deliverables
You get correctly sized, optimized assets and optional OG cards on disk, ready to commit or upload with your next frontend ship.
- Resized or format-converted image files
- Optimized or batched web assets
- OG card PNG (or chosen output path)
Recommended Skills
Journey fit
Image prep is part of assembling UI assets, marketing previews, and performant static files while you build the product surface. Operations target web-ready assets (WebP, thumbnails, OG cards) tied to frontend delivery rather than API logic or launch distribution campaigns.
How it compares
Local Pillow/img-process automation—not a cloud DAM or a design-tool plugin subscription.
Common Questions / FAQ
Who is image-processing for?
Solo builders shipping web apps or content sites who want fast, repeatable image resize, format conversion, and OG card generation from the agent or terminal.
When should I use image-processing?
Use it in Build (frontend) when images are too large, need WebP, logos need whitespace trimmed, thumbnails are required, or you need an OG card before launch pages go live.
Is image-processing safe to install?
Confirm package provenance and review the Security Audits panel on this Prism page; the skill runs local filesystem and shell commands via img-process and Python.
SKILL.md
READMESKILL.md - Image Processing
# Image Processing Use `img-process` (shipped in `bin/`) for common operations. For complex or custom workflows, generate a Pillow script adapted to the user's environment. ## Quick Reference — img-process CLI ```bash img-process resize hero.png --width 1920 img-process convert logo.png --format webp img-process trim logo-raw.jpg -o logo-clean.png --padding 10 img-process thumbnail photo.jpg --size 200 img-process optimise hero.jpg --quality 85 --max-width 1920 img-process og-card -o og.png --title "My App" --subtitle "Built for speed" img-process batch ./images --action convert --format webp -o ./optimised ``` **Use `img-process` when**: the operation is standard (resize, convert, trim, thumbnail, optimise, OG card, batch). This is faster and avoids generating a script each time. **Generate a custom script when**: the operation needs logic `img-process` doesn't cover (compositing multiple images, watermarks, complex text layouts, conditional processing). ## Prerequisites Pillow is required for both `img-process` and custom scripts: ```bash pip install Pillow ``` If Pillow is unavailable, use alternatives: | Alternative | Platform | Install | Best for | |-------------|----------|---------|----------| | `sips` | macOS (built-in) | None | Resize, convert (no trim/OG) | | `sharp` | Node.js | `npm install sharp` | Full feature set, high performance | | `ffmpeg` | Cross-platform | `brew install ffmpeg` | Resize, convert | ## Output Format Guide | Use case | Format | Why | |----------|--------|-----| | Photos, hero images | WebP | Best compression, wide browser support | | Logos, icons (need transparency) | PNG | Lossless, supports alpha | | Fallback for older browsers | JPG | Universal support | | Thumbnails | WebP or JPG | Small file size priority | | OG cards | PNG | Social platforms handle PNG best | ## Core Patterns ### Save with Format-Specific Quality Different formats need different save parameters. Always handle RGBA-to-JPG compositing — JPG does not support transparency, so composite onto a white background first. ```python from PIL import Image import os def save_image(img, output_path, quality=None): os.makedirs(os.path.dirname(output_path) or ".", exist_ok=True) kwargs = {} ext = output_path.lower().rsplit(".", 1)[-1] if ext == "webp": kwargs = {"quality": quality or 85, "method": 6} elif ext in ("jpg", "jpeg"): kwargs = {"quality": quality or 90, "optimize": True} # RGBA → RGB: composite onto white background if img.mode == "RGBA": bg = Image.new("RGB", img.size, (255, 255, 255)) bg.paste(img, mask=img.split()[3]) img = bg elif ext == "png": kwargs = {"optimize": True} img.save(output_path, **kwargs) ``` ### Resize with Aspect Ratio When only width or height is given, calculate the other from aspect ratio. Use `Image.LANCZOS` for high-quality downscaling. ```python def resize_image(img, width=None, height=None): if width and height: return img.resize((width, height), Image.LANCZOS) elif width: ratio = width / img.width return img.resize((width, int(img.height * ratio)), Image.LANCZOS) elif height: ratio = height / img.height return img.resize((int(img.width * ratio), height), Image.LANCZOS) return img ``` ### Trim Whitespace (Auto-Crop) Remove surrounding whitespace from logos and icons. Convert to RGBA first, then use `getbbox()` to find content bounds. ```python img = Image.open(i