From image-optimization
Optimizes web images using WebP/AVIF formats, responsive srcset/picture elements, lazy loading, and Sharp for Node.js. Improves page loads, responsive images, production assets.
npx claudepluginhub secondsky/claude-skills --plugin image-optimizationThis skill uses the workspace's default tool permissions.
Optimize images for web performance with modern formats and responsive techniques.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Optimize images for web performance with modern formats and responsive techniques.
| 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 |
<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>
<!-- 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"
>
const sharp = require('sharp');
async function optimizeImage(input, output) {
await sharp(input)
.resize(1200, null, { withoutEnlargement: true })
.webp({ quality: 80 })
.toFile(output);
}
| Asset Type | Target Size |
|---|---|
| Hero image | <200KB |
| Thumbnail | <30KB |
| Total images | <500KB |