image-optimizer_skill

Overview

This skill optimizes images for web performance by converting to modern formats, compressing, and generating responsive sizes. It automates scanning, planning, and batch processing so images load faster and consume less bandwidth. The goal is measurable size reduction while preserving visual quality and providing safe fallbacks for broad compatibility.

How this skill works

The skill scans a project for common image types, reports counts, sizes, and largest offenders, then recommends an optimization plan. It verifies available tools (ImageMagick, cwebp, sharp, avifenc), offers installation steps if missing, and prepares a backup before running conversions. After confirmation, it creates optimized outputs (WebP/AVIF/JPEG/PNG), optional responsive variants, and can generate <picture> elements or update framework image configs.

When to use it

• You need to "optimize images", "compress images", or "convert to WebP" for web delivery
• Performance audits show heavy image weight or poor LCP scores
• Preparing images for production builds or CI/CD pipelines
• Generating responsive sizes for different device breakpoints
• Creating safe fallbacks for browsers that lack modern format support

Best practices

• Always back up originals and keep them in a separate folder or Git LFS
• Use WebP/AVIF for modern browsers and provide JPEG/PNG fallbacks in <picture>
• Target quality ranges: JPEG 75–85 for photos, WebP ~80, AVIF when supported
• Generate multiple widths (320, 480, 768, 1024, 1920) and use srcset
• Compress during build time or CI, not at runtime; serve from a CDN when possible

Example use cases

• Batch-convert a site's product photos to WebP and generate responsive sizes for mobile and desktop
• Integrate an image-optimization script into GitHub Actions to auto-optimize images on pull request
• Reduce hero background images under 200 KB to improve Largest Contentful Paint
• Create <picture> markup for critical images with WebP + JPEG fallback and native lazy loading
• Add optimized assets to a Next.js config to enable AVIF and WebP delivery for supported devices