image-handling

name	image-handling
description	Right format, right size, right quality — plus AI image generation via Replicate
tier	standard
applyTo	**/*.png,**/*.jpg,**/*.jpeg,**/*.webp,**/*.svg,**/*image*

Image Handling Skill

Right format, right size, right quality.

Format Selection

Format	Best For	Supports
SVG	Icons, logos, diagrams	Infinite scale, animation
PNG	Screenshots, transparency	Lossless, alpha channel
JPEG	Photos, gradients	Small size, no transparency
WebP	Web images	Best compression, both
ICO	Favicons	Multi-resolution

Conversion Commands

# SVG to PNG using sharp-cli (recommended)
# --density sets DPI for vector rendering (150 = crisp text)
npx sharp-cli -i input.svg -o output-folder/ --density 150 -f png

# Note: output must be a directory, filename preserved from input
npx sharp-cli -i banner.svg -o assets/ --density 150 -f png
# Creates: assets/banner.png

# ImageMagick (if installed)
magick input.svg -resize 512x512 output.png
magick input.png -quality 85 output.jpg

# Multiple sizes
foreach ($size in 16,32,64,128,256,512) {
  magick input.svg -resize ${size}x${size} "icon-$size.png"
}