image-processing
Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images. Uses Pillow (Python) — no ImageMagick needed. Trigger with 'resize image', 'convert to webp', 'trim logo', 'optimise images', 'make thumbnail', 'create OG image', 'crop whitespace', 'process image', or 'image too large'.
Security Assessment
About image-processing
The image-processing skill provides comprehensive image manipulation capabilities for web development workflows. It handles common tasks like resizing, format conversion, whitespace trimming, file size optimization, thumbnail generation, and OG card creation. Built on Python's Pillow library, it eliminates the need for external dependencies like ImageMagick, making it portable and easy to integrate into any development environment.
The skill offers two approaches: a ready-to-use CLI tool (img-process) for standard operations, and custom Python script generation for complex workflows. It supports all major web image formats (PNG, WebP, JPG) with format-specific optimization, handles transparency correctly when converting between formats, maintains aspect ratios during resizing, and provides batch processing capabilities. The tool uses high-quality resampling (LANCZOS) for professional results and includes smart defaults for quality settings optimized for each format.
This skill is designed for web developers, frontend engineers, and designers who need to process images as part of their build pipeline or content workflow. Common use cases include preparing hero images for landing pages, converting logo assets to multiple formats, generating social media preview cards, creating thumbnail galleries, optimizing images for faster page loads, and automating image processing in CI/CD pipelines. The skill is particularly valuable when working on projects that require consistent image processing across multiple files or formats.
FAQ
What's the difference between using img-process CLI and generating a custom script?
Use img-process for standard operations like resize, convert, trim, thumbnail, optimize, OG card creation, and batch processing. Generate a custom Pillow script when you need advanced features not covered by the CLI, such as compositing multiple images, adding watermarks, complex text layouts, or conditional processing logic.
Do I need ImageMagick or other external tools installed?
No, the skill uses Python's Pillow library exclusively. You only need to install Pillow with 'pip install Pillow'. If Pillow is unavailable, the skill can suggest alternatives like sips (macOS built-in), sharp (Node.js), or ffmpeg depending on your platform and needs.
How does the skill handle transparency when converting to JPG?
The skill automatically detects RGBA images and composites them onto a white background before saving as JPG, since JPG format doesn't support transparency. This prevents conversion errors and ensures clean output.
Which image format should I use for different purposes?
Use WebP for photos and hero images (best compression), PNG for logos and icons that need transparency (lossless with alpha channel), JPG as a fallback for older browsers (universal support), and PNG for OG cards (best compatibility with social platforms).
Can I process multiple images at once?
Yes, the img-process CLI includes a batch command that can process entire directories. Use 'img-process batch ./images --action convert --format webp -o ./optimised' to convert all images in a folder at once.
Install image-processing
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
jezweb/claude-skills