Image Enhancement Studio

Advanced image processing toolkit for enhancing, optimizing, and transforming images programmatically using sharp, ImageMagick, and Canvas APIs with batch processing and quality optimization.

When to Use This Skill

Choose Image Enhancement when:

• Batch processing images for web optimization (resize, compress, format convert)
• Applying programmatic image adjustments (brightness, contrast, sharpening)
• Building automated image processing pipelines
• Creating responsive image sets (thumbnails, srcset variants)
• Removing backgrounds, watermarking, or compositing images

Consider alternatives when:

• Need AI-generated images — use image generation models
• Need manual editing with layers — use Photoshop or GIMP
• Need vector graphics — use SVG tools

Quick Start

Copy
# Activate image enhancement
claude skill activate elite-image-enhancement-studio

# Optimize images for web
claude "Optimize all images in /public/images/ for web delivery"

# Create responsive image sets
claude "Generate responsive image variants (320, 640, 1024, 1920) for hero.jpg"

Example Image Processing Pipeline

Copy
import sharp from 'sharp';
import path from 'path';
import { glob } from 'glob';

// Batch optimize images for web
async function optimizeForWeb(inputDir: string, outputDir: string) {
  const files = await glob(`${inputDir}/**/*.{jpg,jpeg,png,webp}`);

  for (const file of files) {
    const filename = path.basename(file, path.extname(file));

    // Generate WebP version (primary format)
    await sharp(file)
      .resize(1920, null, { withoutEnlargement: true })
      .webp({ quality: 80, effort: 6 })
      .toFile(`${outputDir}/${filename}.webp`);

    // Generate AVIF version (modern browsers)
    await sharp(file)
      .resize(1920, null, { withoutEnlargement: true })
      .avif({ quality: 65, effort: 6 })
      .toFile(`${outputDir}/${filename}.avif`);

    // Generate fallback JPEG
    await sharp(file)
      .resize(1920, null, { withoutEnlargement: true })
      .jpeg({ quality: 85, progressive: true, mozjpeg: true })
      .toFile(`${outputDir}/${filename}.jpg`);

    console.log(`Optimized: ${filename}`);
  }
}

// Generate responsive image set
async function generateSrcset(input: string, outputDir: string) {
  const widths = [320, 640, 1024, 1440, 1920];
  const filename = path.basename(input, path.extname(input));

  const results = await Promise.all(
    widths.map(async (w) => {
      const outputPath = `${outputDir}/${filename}-${w}w.webp`;
      await sharp(input)
        .resize(w, null, { withoutEnlargement: true })
        .webp({ quality: 80 })
        .toFile(outputPath);
      return { width: w, path: outputPath };
    })
  );

  // Generate srcset string
  const srcset = results
    .map(r => `${r.path} ${r.width}w`)
    .join(', ');

  return srcset;
}

Core Concepts

Processing Operations

Operation	Description	Tool
Resize	Scale images to target dimensions	sharp, ImageMagick
Crop	Extract regions with focal point awareness	sharp (attention strategy)
Format Convert	Convert between JPEG, PNG, WebP, AVIF	sharp
Compress	Reduce file size with quality control	sharp, mozjpeg, pngquant
Sharpen	Enhance edge clarity after resizing	sharp (unsharp mask)
Color Adjust	Brightness, contrast, saturation, gamma	sharp (modulate, tint)
Composite	Layer images, add watermarks	sharp (composite)
Metadata	Read/write EXIF, strip for privacy	sharp (withMetadata)

Format Comparison

Format	Best For	Compression	Browser Support
WebP	General web use	Excellent (25-35% smaller than JPEG)	97%+
AVIF	Modern browsers, photos	Best (40-50% smaller than JPEG)	90%+
JPEG	Universal fallback	Good with mozjpeg	100%
PNG	Transparency, screenshots	Lossless (large files)	100%
SVG	Icons, logos, illustrations	Vector (tiny files)	100%

Copy
# ImageMagick batch processing
# Resize all images to max 1920px width
mogrify -resize 1920x\> -quality 85 images/*.jpg

# Create thumbnails
mogrify -resize 200x200^ -gravity center -extent 200x200 \
  -path thumbnails/ images/*.jpg

# Add watermark to all images
for img in images/*.jpg; do
  composite -gravity southeast -geometry +10+10 \
    watermark.png "$img" "watermarked/$(basename $img)"
done

# Strip metadata from all images
exiftool -all= -overwrite_original images/*

# Convert PNG to WebP with transparency
cwebp -q 80 -alpha_q 90 input.png -o output.webp

Configuration

Parameter	Description	Default
output_format	Target format: webp, avif, jpeg, png	webp
quality	Compression quality (1-100)	80
max_width	Maximum output width	1920
progressive	Progressive loading for JPEG	true
strip_metadata	Remove EXIF data	true
sharpen	Apply sharpening after resize	true
responsive_widths	Breakpoints for srcset generation	[320, 640, 1024, 1920]
effort	Compression effort (1-10, higher = slower)	6

Best Practices

1. Serve WebP with JPEG fallback using the <picture> element — WebP offers 25-35% smaller files than JPEG at equivalent quality. Use <picture> with <source type="image/webp"> for progressive enhancement. Add AVIF as a first source for even better compression in modern browsers.

2. Always resize before compressing — Resize to the maximum display size first, then apply quality compression. Compressing a 4000px image and resizing client-side wastes bandwidth and CPU. Serve exactly the resolution needed.

3. Use sharp's attention-based cropping for thumbnails — sharp.resize(width, height, { fit: 'cover', position: 'attention' }) uses edge detection to keep the most interesting region when cropping. This produces better thumbnails than center-crop for most photos.

4. Implement lazy loading with blur-up placeholders — Generate a tiny (20px wide) blurred version of each image as an inline base64 placeholder. Display the placeholder immediately, then swap in the full image when it enters the viewport.

5. Strip metadata before serving to protect privacy — Images from cameras and phones contain GPS coordinates, device information, and timestamps. Always strip EXIF data for user-uploaded images unless the application specifically needs it.

Common Issues

Images look oversharpened after resizing. Sharp's default sharp() resize applies mild sharpening. For already-sharp images, disable with .resize(width, height, { kernel: 'lanczos3' }).sharpen(false). For web images, a single pass of sharpen({ sigma: 0.5 }) after resize is usually sufficient.

WebP conversion produces larger files than the JPEG source. This happens with already-optimized JPEGs or simple images with few colors. Set a file size comparison check — if WebP is larger, serve the original JPEG. Use quality 75-80 for WebP versus 85 for JPEG to achieve consistent size savings.

Batch processing exhausts memory on large image sets. Process images sequentially rather than all in parallel. Sharp uses native memory outside Node.js's heap, so standard memory limits don't apply. Limit concurrency to 4-8 simultaneous operations using a worker pool, and call sharp.cache(false) to disable caching for batch operations.