Назад към всички

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 thum

$ git log --oneline --stat
stars:577
forks:110
updated:March 4, 2026
SKILL.mdreadonly
SKILL.md Frontmatter
nameimage-processing
descriptionProcess 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'.
compatibilityclaude-code-only

Image 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:

AlternativePlatformInstallCapabilities
sipsmacOS (built-in)NoneResize, convert (no trim/OG)
sharpNode.jsnpm install sharpFull feature set
ffmpegCross-platformbrew install ffmpegResize, 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)

  1. Trim whitespace
  2. Convert to PNG (for transparency)
  3. 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:

  1. Generate with Gemini (raw PNG output)
  2. User picks favourite
  3. Optimise: resize to target width, convert to WebP, compress

Output Format Guide

Use caseFormatWhy
Photos, hero imagesWebPBest compression, wide browser support
Logos, icons (need transparency)PNGLossless, supports alpha
Fallback for older browsersJPGUniversal support
ThumbnailsWebP or JPGSmall file size priority
OG cardsPNGSocial platforms handle PNG best

Reference Files

WhenRead
Implementing any Pillow operationreferences/pillow-patterns.md