1---2name: image-23description: Image processing workflow guide for format selection, resizing, cropping, compression, metadata, transparency, color profiles, and destination-specific exports. Covers web, social, ecommerce, photography, branding, screenshots, and accessibility.4---56# Image78Image processing workflow guide for destination-specific exports.910---1112## When to Use1314Use when the main artifact is an image file or visual asset, especially when:15- Format choice matters16- Resizing, cropping, compression needed17- Metadata, transparency, color profile concerns18- Destination-specific requirements (web, social, ecommerce, print)1920---2122## Quick Reference2324| Situation | Load File | Why |25|-----------|-----------|-----|26| Web optimization, responsive images, lazy loading, SVG | web.md | Avoid CLS/LCP mistakes, oversized assets |27| Color profiles, metadata, RAW, print workflows | photography.md | Protect color intent, print readiness |28| Social platform dimensions, safe zones, banners | social.md | Prevent unsafe crops, recompression surprises |29| Product photos, marketplace standards | ecommerce.md | Preserve zoom detail, white-background compliance |30| Logos, favicons, SVGs, app icons | branding.md | Protect small-size legibility, SVG consistency |31| UI screenshots, docs captures, redaction | screenshots.md | Avoid blurry captures, privacy leaks |32| Alt text, text-in-image risk, charts | accessibility.md | Keep images usable and compliant |33| ImageMagick and Pillow commands | commands.md | Use concrete commands once decision is clear |3435---3637## Fast Workflow38391. **Identify asset type:** photo, screenshot, UI capture, logo, diagram, social card, product image, print source402. **Identify destination:** web page, social upload, marketplace gallery, print handoff, internal archive413. **Decide preservation:** vector, layered, or RAW vs flattened424. **Inspect file:** dimensions, aspect ratio, orientation, transparency, color profile, metadata435. **Load destination-specific file** if needed446. **Make minimum safe transformation:** crop, resize, convert, compress, strip/preserve metadata, export457. **Validate in destination context**4647---4849## Asset-Type Defaults5051| Asset Type | Best Starting Point | Watch Out For |52|------------|---------------------|---------------|53| Photo | WebP or AVIF for web, JPEG fallback, layered/RAW master | Color profile shifts, overcompression |54| Product photo | JPEG or WebP, high-res clean master | White background, edge cleanup, zoom detail |55| Screenshot/UI | PNG or lossless WebP | JPEG blur, privacy leaks, unreadable text |56| Logo/icon | SVG master, PNG fallbacks only | Tiny details, unsupported SVG pipelines |57| Social/OG card | PNG or high-quality JPEG | Unsafe crop, tiny text, double compression |58| Diagram/chart | SVG when possible, PNG when raster needed | Thin lines, low contrast |59| Print image | TIFF or high-quality JPEG with correct profile | Wrong profile, wrong physical size, no bleed |6061---6263## Core Rules6465### 1. Choose Workflow by Destination6667- Web delivery, social export, ecommerce prep, print output, and archive preservation are different jobs68- Screenshot, product photo, logo, infographic, and print asset should not use same format/compression69- If destination is specialized, read matching file before locking decisions7071### 2. Pick Formats by Content7273| Content | Format |74|---------|--------|75| Photos | AVIF or WebP (modern web), JPEG (compatibility) |76| Screenshots, UI, diagrams, text-heavy | PNG or lossless WebP |77| Logos, icons, simple illustrations | SVG when supported |78| Transparency needed | PNG, WebP, or AVIF (not JPEG) |79| Animation | WebP, MP4, or WebM (not GIF) |80| Master/archive | TIFF, PSD, layered formats, RAW |8182### 3. Preserve Color, Transparency, Detail8384- Web assets: sRGB unless destination needs otherwise85- Stripping ICC profiles can shift colors86- Transparent assets need alpha-safe formats87- Repeated lossy saves compound damage8889### 4. Resize, Crop, Compress in Right Order90911. Decide aspect ratio922. Crop933. Resize944. Compress9596- Do not upscale by default97- Retina: 2x is normal, 3x should be deliberate98- Social cards, ecommerce slots crop aggressively — protect focal area99100### 5. Metadata and Orientation101102- EXIF orientation can rotate images unexpectedly103- Public web assets should strip GPS and unnecessary camera metadata104- Copyright, author metadata may need preservation105106### 6. Practical Budgets107108| Image Type | Size Budget |109|------------|-------------|110| Hero image | Under 200 KB |111| Content image | Under 100 KB |112| Thumbnail | Under 30 KB |113| Raster icon | Under 5 KB |114115- Reserve layout space with explicit dimensions116- Do not lazy-load LCP/hero image117118### 7. Validate Against Destination119120- Platform specs are not interchangeable121- Ecommerce: background consistency, edge cleanliness, zoom detail122- Social: safe composition for different feed crops123- Print: physical size, bleed, color handling124125### 8. Batch Safely126127- Work from originals, not already-optimized outputs128- Spot-check before batch processing129- Keep per-destination exports separated from masters130131---132133## Common Traps134135| Mistake | Consequence |136|---------|-------------|137| Saving transparent images as JPEG | Lost alpha channel |138| JPEG for screenshots | Blurry text |139| Wrong aspect ratio with correct dimensions | Unsafe crop |140| Recompressing same JPEG multiple times | Quality degradation |141| Stripping metadata blindly | Broken orientation, lost licensing info |142| Forgetting sRGB | Color shifts between tools |143| Using SVG where platform doesn't support it | Broken display |144| Embedding critical text in images | Accessibility issues, hard to update |145| Rasterizing logo too early | Blurry exports forever |146147---148149## When to Use This Skill150151- Optimize images for web delivery152- Prepare product photos for ecommerce153- Create social media assets154- Export for print155- Process screenshots for documentation156- Handle logos and icons correctly157- Ensure image accessibility158159---160161## Related Skills162163- **image-edit** — Masking, cleanup, inpainting, targeted edits164- **image-generation** — AI image generation165- **photography** — Capture, color, print workflows166- **svg** — Vector graphics workflows167- **ecommerce** — Marketplace product requirements
gabrielmoreira