image-processing

Resize, convert, trim, and optimize images for web using Pillow.

1|Updated Aug 18, 2026
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill image-processing-scsm-unrestrict
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-processing
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/image-processing
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill image-processing-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow.

What problem does it solve? Web projects constantly need images resized, converted between formats, trimmed of whitespace, and compressed for performance, and doing this manually or hunting for the right tool each time slows down frontend delivery. ## Core Features & Use Cases - Standard Operations via CLI: Resize, convert (PNG/WebP/JPG), trim whitespace, generate thumbnails, optimize file size, and batch-process folders with the shipped img-process command. - OG Card Generation: Create 1200x630 social share cards with centered title and subtitle text over images or solid backgrounds. - Custom Pillow Scripts: Generate Python scripts for complex workflows like compositing, watermarks, or conditional processing that the CLI does not cover. - Use Case: A client sends a raw JPG logo with a white background. Trim the whitespace, export a transparent PNG, generate a 512px favicon, and convert hero photos to WebP at quality 85 for production. ## Quick Start Ask the agent to convert all images in the ./images folder to WebP and resize the hero image to 1920 pixels wide.

Frequently Asked Questions about image-processing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert images to WebP with Python?

Use Pillow to open the image and save it with the .webp extension, passing quality and method parameters such as quality=85 and method=6. The img-process CLI wraps this as img-process convert logo.png --format webp.

How to trim whitespace from a logo image automatically?

Convert the image to RGBA mode, then call getbbox() to find the bounding box of non-zero pixels and crop to it. The img-process trim command does this in one step with an optional padding argument.

What image format should I use for web photos?

Use WebP for photos and hero images because it offers the best compression with wide browser support. Use PNG for logos needing transparency, JPG as a fallback for older browsers, and PNG for OG cards.

Can I process images without Pillow installed?

Yes, alternatives include sips on macOS for resize and convert, the sharp npm package for a full feature set in Node.js, and ffmpeg for cross-platform resize and conversion. None of these cover trimming or OG cards as directly.

Why does saving RGBA images as JPG fail or look wrong?

JPG does not support transparency, so RGBA images must be composited onto a white background before saving. Create an RGB background image, paste the original using its alpha channel as a mask, then save.