image-processing
npx machina-cli add skill jezweb/claude-skills/image-processing --openclawImage Processing
Process images for web development. Generate a Pillow script adapted to the user's environment and specific needs.
Prerequisites
Pillow is usually pre-installed. If not:
pip install Pillow
If Pillow is unavailable, adapt using alternatives:
| Alternative | Platform | Install | Capabilities |
|---|---|---|---|
sips | macOS (built-in) | None | Resize, convert (no trim/OG) |
sharp | Node.js | npm install sharp | Full feature set |
ffmpeg | Cross-platform | brew install ffmpeg | Resize, convert |
Capabilities
Generate a Python script using Pillow for any of these operations. See references/pillow-patterns.md for implementation patterns, especially RGBA-to-JPG compositing and cross-platform font discovery.
Resize
Scale to specific dimensions or by width/height (maintain aspect ratio if only one given). Use Image.LANCZOS for high-quality downscaling.
Convert Format
Convert between PNG, JPG, WebP. Handle RGBA-to-JPG by compositing onto white background. Apply format-specific quality settings (WebP: 85, JPG: 90, PNG: optimize).
Trim Whitespace
Auto-crop surrounding whitespace from logos and icons. Convert to RGBA first, then use getbbox() to find content bounds.
Thumbnail
Fit within max dimensions while maintaining aspect ratio. Use img.thumbnail((size, size), Image.LANCZOS).
Optimise for Web
Resize + compress in one step. Convert to WebP for best compression. Typical settings: width 1920, quality 85.
OG Card (1200x630)
Generate Open Graph card with title/subtitle overlay on a background image or solid colour. Apply semi-transparent overlay for text readability. Centre text horizontally.
Common Workflows
Logo Cleanup (client-supplied JPG with white background)
- Trim whitespace
- Convert to PNG (for transparency)
- Create favicon-sized version (thumbnail at 512px)
Prepare Hero Image for Production
Resize to max width 1920, convert to WebP, compress at quality 85.
Batch Process
For multiple images, generate a single script that loops over all files rather than processing one at a time.
Pipeline with Gemini Image Gen
Generate images with the gemini-image-gen skill, then process them:
- Generate with Gemini (raw PNG output)
- User picks favourite
- Optimise: resize to target width, convert to WebP, compress
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 |
Reference Files
| When | Read |
|---|---|
| Implementing any Pillow operation | references/pillow-patterns.md |
Source
git clone https://github.com/jezweb/claude-skills/blob/main/plugins/design-assets/skills/image-processing/SKILL.mdView on GitHub Overview
This skill creates a Pillow-powered Python script to perform common image tasks for web development. It covers resizing, trimming whitespace, format conversion (PNG/JPG/WebP), optimization, thumbnails, and OG card creation, all without ImageMagick. It’s designed to adapt to your environment and needs.
How This Skill Works
Generates a Python script using Pillow for selected operations (resize, convert format, trim whitespace, generate thumbnails, optimize, and OG cards). It uses best practices like RGBA-to-JPG compositing on a white background, Image.LANCZOS for high-quality downscaling, and format-specific quality settings (WebP: 85, JPG: 90, PNG optimize). The workflow supports both single-image and batch processing patterns and references common Pillow patterns for cross-platform font and image handling.
When to Use It
- Logo cleanup: trim whitespace, convert from JPG to PNG for transparency, and generate a 512px thumbnail.
- Prepare hero images for production: resize to a max width of 1920, convert to WebP, and compress at quality 85.
- Batch process a folder of images with a single script that loops over files.
- Create OG card images (1200x630) with title/subtitle overlays on a background.
- General web optimization: resize, convert to WebP, and compress in one step.
Quick Start
- Step 1: Install Pillow if needed: pip install Pillow
- Step 2: Generate a Pillow-based script that includes resize, trim, convert, and optional OG-card logic tailored to your inputs
- Step 3: Run the script on your images and verify outputs, adjusting quality and sizes as necessary
Best Practices
- Prefer RGBA-to-JPG workflow when transparency isn’t needed; composite on a white background to avoid artifacts.
- Use Image.LANCZOS for high-quality downscaling during resize operations.
- Apply format-specific quality settings (WebP 85, JPG 90, PNG optimized) to balance size and quality.
- Test scripts on a representative set of images before batch processing.
- Create a single reusable script for batch processing to minimize redundancy and errors.
Example Use Cases
- Logo Cleanup: trim whitespace from a client-provided JPG, convert to PNG for transparency, and generate a 512px thumbnail.
- Hero Image Prep: resize a large photograph to a max width of 1920, convert to WebP, and compress at quality 85.
- Batch Processing: generate a script that loops through a folder of assets and applies standard optimizations to all images.
- OG Card Creation: produce a 1200x630 Open Graph card with a title overlay on a background image.
- Web Optimization: convert assets to WebP and apply size-aware compression for fast page loads.
