Image Optimization

Covers the essentials for getting images production-ready: format selection (WebP, AVIF, with JPEG fallbacks), responsive srcset implementation, and lazy loading patterns. Includes a Sharp-based build pipeline example and concrete performance targets like keeping hero images under 200KB. The checklist format makes it easy to audit existing sites. Use this when you're trying to shave seconds off page load times or when lighthouse is yelling at you about unoptimized images. The picture element examples are copy-paste ready, which saves you from looking up the syntax for the hundredth time.

skills.sh installs: 604
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill image-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

Image Optimization

Optimize images for web performance with modern formats and responsive techniques.

Format Selection

Format	Best For	Compression
JPEG	Photos	Lossy, 50-70% reduction
PNG	Icons, transparency	Lossless, 10-30%
WebP	Modern browsers	25-35% better than JPEG
AVIF	Next-gen	50% better than JPEG
SVG	Logos, icons	Vector, scalable

Responsive Images

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img
    src="image.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description"
    loading="lazy"
    decoding="async"
  >
</picture>

Lazy Loading

<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Description">

<!-- With blur placeholder -->
<img
  src="placeholder-blur.jpg"
  data-src="image.jpg"
  class="lazy"
  alt="Description"
>