Image optimization

Skill secondsky/claude-skills/plugins/image-optimization/skills/image-optimization

Optimizes images for web performance using modern formats, responsive techniques, and lazy loading strategies. Use when improving page load times, implementing responsive images, or preparing assets for production deployment.From its SKILL.md

Install

npx -y skills add secondsky/claude-skills --skill image-optimization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.9 KB, 458 tokens by cl100k_base, as published. Nobody here has run it

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"
>

Build Pipeline (Sharp)

const sharp = require('sharp');

async function optimizeImage(input, output) {
  await sharp(input)
    .resize(1200, null, { withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(output);
}

Performance Targets

Asset Type	Target Size
Hero image	<200KB
Thumbnail	<30KB
Total images	<500KB

Optimization Checklist

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.