img-optimize

lttr's avatarfrom lttr

This skill should be used when optimizing, converting, or resizing images. Trigger when user mentions image optimization, HEIC/HEIF conversion, JPEG/PNG/WebP/AVIF processing, reducing image file size, or batch image processing. Uses sharp-cli as the primary tool.

⭐4stars🔀1forks📁View on GitHub🕐Updated Dec 25, 2025
[Visual Content Workflows]

When & Why to Use This Skill

The Image Optimization skill is a high-performance tool designed to automate the processing, compression, and conversion of visual assets. Leveraging industry-standard tools like sharp-cli and heif-convert, it enables seamless transformation of images across formats such as JPEG, PNG, WebP, AVIF, and HEIC. This skill is optimized for developers and creators who need to enhance web performance through superior compression, ensure cross-platform compatibility, and manage large-scale batch image resizing with precision and speed.

Use Cases

  • Web Performance Optimization: Automatically convert and compress high-resolution images into modern formats like WebP or AVIF to reduce file sizes and improve website loading speeds without sacrificing quality.
  • Mobile Format Conversion: Seamlessly batch-convert HEIC/HEIF photos from mobile devices into standard JPEG or PNG formats for better compatibility across different operating systems and applications.
  • Automated Batch Resizing: Quickly process entire directories of images to specific dimensions (e.g., 1920px for web) using smart presets, ensuring consistency for e-commerce catalogs or social media galleries.
  • Professional Quality Control: Fine-tune advanced parameters such as chroma subsampling (4:4:4), metadata preservation, and MozJPEG compression for high-end archival or professional design workflows.
  • Reference-Based Processing: Analyze a reference image's dimensions and format to automatically replicate its specifications across a new set of input files for visual consistency.
nameimg-optimize
descriptionThis skill should be used when optimizing, converting, or resizing images. Trigger when user mentions image optimization, HEIC/HEIF conversion, JPEG/PNG/WebP/AVIF processing, reducing image file size, or batch image processing. Uses sharp-cli as the primary tool.

Image Optimization Skill

Optimize and convert images for various use cases using sharp-cli.

Tools

  • sharp-cli — Primary tool for all image optimization (JPEG/PNG/WebP/AVIF). Run sharp --help for full reference.
  • heif-convert — Convert HEIC/HEIF to JPEG first, then use sharp for further optimization.

Workflow

1. Analyze Input

Determine what images to process:

  • Check for specific files or glob pattern (e.g., *.HEIC, *.jpg)
  • List matching files to confirm scope
  • Detect formats and sizes if helpful

2. Analyze Reference Image (Optional)

If matching a reference image:

file reference.webp      # Get format and dimensions
ls -lah reference.webp   # Get file size

Extract: format, dimensions (width x height), approximate file size.

3. Determine Parameters

Ask user for unclear parameters. Smart defaults by use case:

Presets:

Preset Size Quality Options
web 1920px 78 progressive, mozjpeg
standard 2560px 90 mozjpeg, metadata
high 3500px 90 4:4:4 chroma, metadata
extra-high 4000px 95 4:4:4 chroma, metadata

Parameters:

  • Format: jpg, png, webp, avif (default: jpg for photos)
  • Resolution: max dimension in pixels (default: 2560)
  • Quality: 1-100 (default: 90 standard, 78 web)
  • Progressive: JPEG only (default: web only)
  • Mozjpeg: better compression (default: true for JPEG)
  • Chroma: 4:2:0 (smaller) vs 4:4:4 (higher quality)
  • Metadata: preserve EXIF (default: true unless web)
  • Output: directory or in-place (default: ask if unclear)

4. Handle HEIC/HEIF Conversion

Convert HEIC/HEIF to JPEG first:

for f in *.HEIC *.heic; do
  [[ -f "$f" ]] || continue
  heif-convert -q 90 "$f" "${f%.*}.jpg"
done

Then process resulting JPEGs with sharp.

5. Build Sharp Command

Structure: sharp -i <input> -o <output-dir> [options] [resize <w> <h>]

Key options:

Option Description
-f webp/jpeg/png/avif Output format
-q <1-100> Quality
-p / --progressive Progressive JPEG
--mozjpeg Better compression
-m / --withMetadata Preserve EXIF
--chromaSubsampling '4:4:4' High quality chroma
resize <w> <h> --fit inside Resize maintaining aspect ratio

Examples:

# Web-optimized
sharp -i *.jpg -o ./optimized resize 1920 1920 --fit inside -q 78 -p --mozjpeg

# Standard with metadata
sharp -i *.jpg -o ./ resize 2560 2560 --fit inside -q 90 --mozjpeg -m

# High quality
sharp -i *.jpg -o ./ resize 3500 3500 --fit inside -q 90 --chromaSubsampling '4:4:4' -m

# Convert to WebP
sharp -i *.jpg -o ./webp -f webp resize 1920 1920 --fit inside -q 80

# Match reference (2200x980 webp)
sharp -i input.png -o . -f webp -q 80 resize 2200 980

6. Execute and Verify

  • Show command before executing
  • Run and report results (files processed, size reduction)
  • Handle errors gracefully

Notes

  • Always prefer sharp-cli over cwebp, imagemagick, etc.
  • Use --fit inside for resize to maintain aspect ratio
  • Web: progressive, mozjpeg, quality 75-85
  • Archival: quality 90-95, metadata, 4:4:4 chroma
  • Default to non-destructive (new directory) unless user wants in-place
  • Match reference: use file for dimensions/format, ls -lah for size