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.

1.36x

Quality

93%

Does it follow best practices?

Impact

98%

1.36x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

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

Repository: secondsky/claude-skills
Commit: 90d6bd7

Last updated: 18 days ago
Created: 18 days ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.