Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
[{"input_file":"Path to the source media file"},{"operation":"resize | convert | compress | crop | watermark | thumbnail | transcode | extract"},{"target_format":"Desired output format"},{"quality":"Quality level or target file size"},{"dimensions":"Target dimensions (optional)"}]
outputs
[{"command":"The shell command to execute"},{"output_path":"Where the processed file will be saved"},{"metadata":"Information about the input/output files"},{"pipeline":"Multi-step processing pipeline if needed"}]
linksTo
["ai-multimodal","ui-ux-pro"]
linkedFrom
["orchestrator","planner"]
preferredNextSkills
["ai-multimodal","ui-ux-pro"]
fallbackSkills
["ai-multimodal"]
riskLevel
low
memoryReadPolicy
selective
memoryWritePolicy
selective
sideEffects
[{"filesystem":"Creates processed media files"}]
Media Processing
Purpose
This skill generates precise commands and pipelines for processing images, video, and audio files. It covers format conversion, resizing, compression, optimization for web delivery, thumbnail generation, watermarking, and batch processing using industry-standard tools: FFmpeg, ImageMagick, Sharp (Node.js), and native browser APIs.
Key Concepts
Tool Selection Guide
Task
Best Tool
Why
Image resize/convert (CLI)
ImageMagick (magick)
Versatile, widely available
Image resize/convert (Node.js)
Sharp
Fastest Node.js image processing
Image optimization for web
Squoosh CLI / Sharp
Modern format support (AVIF, WebP)
Video processing
FFmpeg
Industry standard, handles everything
Audio processing
FFmpeg
Supports all codecs and formats
Animated images (GIF/APNG)
FFmpeg
Better quality and compression than IM
PDF to image
ImageMagick + Ghostscript
Rasterize PDF pages
SVG manipulation
SVGO (CLI)
SVG-specific optimization
Modern Image Formats
Format
Use Case
Browser Support
Quality
AVIF
Photos, illustrations
Chrome, Firefox, Safari 16+
Best compression
WebP
Universal web images
All modern browsers
Good compression
JPEG
Photos (fallback)
Universal
Baseline
PNG
Transparency, screenshots
Universal
Lossless
SVG
Icons, logos, illustrations
Universal
Vector/infinite
JPEG XL
Future standard
Chrome (flag), Safari
Excellent
Quality vs File Size Guidelines
PHOTOGRAPHIC CONTENT:
AVIF quality 50-65 → Excellent visual quality, ~60% smaller than JPEG
WebP quality 75-85 → Good quality, ~30% smaller than JPEG
JPEG quality 80-85 → Standard web quality
ILLUSTRATIONS / UI:
WebP lossless → Smaller than PNG, no quality loss
PNG optimized → Universal support, lossless
SVG → Best for vector graphics (infinitely scalable)
THUMBNAILS:
AVIF quality 40-50 → Good enough for small sizes
WebP quality 60-70 → Small and fast
JPEG quality 60-70 → Acceptable for 200px thumbnails
Image Processing Commands
Resize Operations (ImageMagick)
# Resize to exact dimensions (may distort)
magick input.jpg -resize 800x600! output.jpg
# Resize to fit within bounds (maintain aspect ratio)
magick input.jpg -resize 800x600 output.jpg
# Resize to fill bounds (may crop)
magick input.jpg -resize 800x600^ -gravity center -extent 800x600 output.jpg
# Resize by percentage
magick input.jpg -resize 50% output.jpg
# Resize width only (height auto)
magick input.jpg -resize 800x output.jpg
# Resize with quality setting
magick input.jpg -resize 800x600 -quality 85 output.jpg
Format Conversion
# JPEG to WebP
magick input.jpg -quality 80 output.webp
# PNG to AVIF
magick input.png -quality 60 output.avif
# SVG to PNG (rasterize)
magick -density 300 input.svg -resize 800x output.png
# PDF page to PNG
magick -density 150 input.pdf[0] output.png
# Batch convert (all JPEGs to WebP)for f in *.jpg; do magick "$f" -quality 80 "${f%.jpg}.webp"; done
Web Optimization Pipeline
# Full web optimization pipeline for a photo
magick input.jpg \
-resize "1920x1920>" \
-strip \
-interlace Plane \
-quality 85 \
-sampling-factor 4:2:0 \
output.jpg
# Generate responsive image setfor size in 320 640 960 1280 1920; do
magick input.jpg \
-resize "${size}x>" \
-quality 80 \
-strip \
"output-${size}w.webp"done
Thumbnail Generation
# Square thumbnail with center crop
magick input.jpg \
-resize 200x200^ \
-gravity center \
-extent 200x200 \
-quality 75 \
-strip \
thumb.jpg
# Rounded thumbnail (for avatars)
magick input.jpg \
-resize 200x200^ \
-gravity center \
-extent 200x200 \
\( +clone -alpha extract \
-draw "fill black polygon 0,0 0,15 15,0 fill white circle 15,15 15,0" \
\( +clone -flip \) -compose Multiply -composite \
\( +clone -flop \) -compose Multiply -composite \
\) -alpha off -compose CopyOpacity -composite \
thumb.png
No lazy loading: Serving all images eagerly. Use loading="lazy" for below-the-fold images.
Missing dimensions: Images without width/height cause layout shifts. Always specify dimensions.
Single format: Serving only JPEG when WebP/AVIF would reduce size by 30-60%.
Oversized sources: Serving 4K images to mobile devices. Use responsive srcset.
No compression: Uploading raw camera images directly. Always compress for web delivery.
GIF for animations: Modern video formats (WebM, MP4) are 10-100x smaller than GIF for animations.
Processing in the request path: Image processing should happen at build/upload time, not per-request. Use a CDN with transformation capabilities for dynamic sizing.
Integration Notes
When ui-ux-pro identifies oversized or unoptimized images, hand off here for processing commands.
When ai-multimodal needs to analyze processed output, provide the optimized file paths.
For batch processing in CI/CD pipelines, combine commands into shell scripts.
Always verify output quality visually — automated metrics (SSIM, PSNR) are helpful but not sufficient.
