Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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-optimizationHow this skill is triggered — by the user, by Claude, or both
Slash command
/image-optimization:image-optimizationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Optimize images for web performance with modern formats and responsive techniques.
Guides selection and conversion of WebP, AVIF, and JPEG XL formats with quality-to-size trade-offs, automated pipelines, and picture element negotiation.
Designs responsive image pipelines with srcset, AVIF/WebP formats, lazy loading, and sizes queries. Generates code for Next.js, Nuxt, Blazor, vanilla HTML/CSS.
Analyzes website images for SEO and performance: checks alt text quality and presence, file sizes against category thresholds, formats like WebP/AVIF, responsive images via <picture>, lazy loading, and CLS prevention.
Share bugs, ideas, or general feedback.
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 |