Image

---
name: Image
slug: image
version: 1.0.4
homepage: https://clawic.com/skills/image
description: "Create, inspect, process, and optimize image files and visual assets with reliable format choice, resizing, compression, color-profile, metadata, and platform-export checks. Use when (1) the task is about images, screenshots, logos, product photos, or graphics; (2) resizing, converting, compressing, cropping, metadata, or export specs matter; (3) the asset must survive web, social, ecommerce, or print delivery without quality or format mistakes."
changelog: "Expanded the skill with branding, screenshot, accessibility, and richer platform-specific workflows while preserving stronger image-processing guidance."
metadata: {"clawdbot":{"emoji":"🖼️","os":["linux","darwin","win32"]}}
---

## When to Use

Use when the main artifact is an image file or visual asset, especially when format choice, resizing, cropping, compression, metadata, transparency, color profile, responsive delivery, social specs, marketplace requirements, or print readiness matter.

If the task is destination-specific, load the matching file before deciding:
- `web.md` for responsive delivery, LCP/CLS, `srcset`, lazy loading, SVG, and modern web formats.
- `social.md` for platform dimensions, safe zones, and feed/story/banner exports.
- `ecommerce.md` for marketplace product-image rules, white backgrounds, zoom, and catalog consistency.
- `photography.md` for RAW, ICC profiles, print export, EXIF, and non-destructive editing.
- `branding.md` for logos, icons, favicons, app icons, SVG consistency, and small-size legibility.
- `screenshots.md` for UI captures, documentation images, annotations, redaction, and marketing/device frames.
- `accessibility.md` for alt text, decorative vs informative images, text in images, charts, and contrast-aware image delivery.
- `commands.md` when the user needs concrete ImageMagick or Pillow examples.

Keep the main workflow in this file, then pull in the specialized file for the exact delivery context instead of guessing from generic image advice.

## Quick Reference

| Situation | Load | Why |
|-----------|------|-----|
| Web optimization, responsive images, lazy loading, SVG | `web.md` | Avoid CLS/LCP mistakes, oversized assets, and wrong web formats |
| Color profiles, metadata, RAW, print, non-destructive workflows | `photography.md` | Protect color intent, print readiness, and master-file quality |
| Social platform dimensions, safe zones, banners, previews | `social.md` | Prevent unsafe crops, unreadable text, and uploader recompression surprises |
| Product photos, marketplace standards, catalog consistency | `ecommerce.md` | Preserve zoom detail, white-background compliance, and catalog consistency |
| Logos, favicons, SVGs, app icons, icon sets | `branding.md` | Protect small-size legibility, SVG consistency, and multi-format icon delivery |
| UI screenshots, docs captures, redaction, annotations | `screenshots.md` | Avoid blurry captures, privacy leaks, and misleading before/after comparisons |
| Alt text, text-in-image risk, charts, decorative vs informative images | `accessibility.md` | Keep image work usable and compliant, not only visually correct |
| ImageMagick and Pillow commands | `commands.md` | Use concrete commands once the export decision is already clear |

## Fast Workflow

1. Identify the asset type: photo, screenshot, UI capture, logo, diagram, social card, product image, or print source.
2. Identify the destination: web page, social upload, marketplace gallery, print handoff, internal archive, or further editing pipeline.
3. Decide whether the source should remain vector, layered, or RAW instead of being flattened too early.
4. Inspect the file before editing: dimensions, aspect ratio, orientation, transparency, color profile, metadata, and current compression damage.
5. Load the destination-specific file if the job is web, social, ecommerce, photography/print, branding, screenshots, accessibility, or command-heavy.
6. Make the minimum safe transformation set: crop, resize, convert, compress, strip or preserve metadata, and export.
7. Validate the exported result in the destination context, not only in the editor.

## Asset-Type Defaults

| Asset type | Usually best starting point | Watch out for |
|-----------|-----------------------------|---------------|
| Photo | WebP or AVIF for web, JPEG fallback, layered/RAW master for editing | Color profile shifts, overcompression, platform recompression |
| Product photo | JPEG or WebP for delivery, high-res clean master | White background, edge cleanup, zoom detail, consistency |
| Screenshot or UI capture | PNG or lossless WebP | JPEG blur, privacy leaks, unreadable text |
| Logo or simple icon | SVG master, PNG fallbacks only when needed | Tiny details, unsupported SVG pipelines, dark/light contrast |
| Social/OG card | PNG or high-quality JPEG sized for preview | Unsafe crop, tiny text, double compression |
| Diagram or chart | SVG when possible, PNG when fixed raster needed | Thin lines, low contrast, missing explanatory text |
| Print image | TIFF or high-quality JPEG with correct profile | Wrong profile, wrong physical size, no bleed |

## Core Rules

### 1. Choose the workflow by destination, not by habit

- Web delivery, social export, ecommerce prep, print output, and archive preservation are different image jobs.
- A screenshot, product photo, logo, infographic, and print asset should not default to the same format or compression strategy.
- Image generation is a different workflow from image processing; treat generated assets as inputs that still need inspection and export discipline.
- If the destination is specialized, read the matching file before locking format, crop, quality, or metadata decisions.
- If the file will be edited again later, preserve a master-grade source before making lightweight delivery exports.

### 2. Pick formats by content, not by trend

- Photos usually want AVIF or WebP for modern web delivery, with JPEG fallback when compatibility matters.
- Screenshots, UI captures, diagrams, and text-heavy graphics often need PNG or lossless WebP to avoid blurry edges.
- Logos, icons, and simple illustrations should stay vector (`.svg`) when the target supports it.
- Transparency changes the decision: JPEG drops alpha, while PNG, WebP, and AVIF can preserve it.
- Animated GIF is rarely the best output; animated WebP, MP4, or WebM are usually smaller and cleaner.
- TIFF, PSD, layered formats, and RAW files are working formats or masters, not normal delivery outputs.
- If a platform re-encodes uploads aggressively, optimize for how that platform recompresses rather than for ideal local viewing.
- Screenshots, diagrams, and charts with sharp edges often benefit from lossless output even when photos do not.

### 3. Preserve color, transparency, and detail deliberately

- Web assets should usually end in sRGB unless the destination explicitly needs something else.
- Stripping or changing ICC profiles can shift colors even when the pixels themselves did not change.
- Transparent assets need alpha-safe formats and validation against both light and dark backgrounds.
- Repeated lossy saves compound damage, so keep a clean source and minimize recompression loops.
- Upscaling, denoising, sharpening, and background removal should be treated as visible edits, not harmless export steps.

### 4. Resize, crop, and compress in the right order

- Decide aspect ratio first, crop second, resize third, and compress last.
- Do not upscale by default; extra pixels do not create missing detail.
- Retina or HiDPI exports should be intentional, not automatic overkill.
- As a starting point, 2x is the normal Retina export and 3x should be deliberate, not default.
- Social cards, ecommerce slots, and marketplace galleries often crop aggressively, so protect the real focal area and any critical text.
- A file that fits the pixel spec can still fail if the crop cuts off faces, products, l