ReddRadar
Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/secondsky/claude-skills/tree/main/plugins/image-optimization/skills/image-optimization
SKILL.md
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
- Use WebP with JPEG fallback
- Implement responsive srcset
- Enable lazy loading for below-fold
- Compress at quality 70-85
- Serve from CDN
- Set proper cache headers
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
secondsky/claude-skills
skill-name
[TODO: Write comprehensive description in third-person. Start with "This skill provides..." or "This skill should be used when..."] [TODO: Add "Use when" scenarios - specific situations where Claude should use this skill] [TODO: Add keywords - technologies, use cases, error messages that should trigger this skill]
secondsky/claude-skills
websocket-implementation
Implements real-time WebSocket communication with connection management, room-based messaging, and horizontal scaling. Use when building chat systems, live notifications, collaborative tools, or real-time dashboards.
secondsky/claude-skills
ai-sdk-ui
secondsky/claude-skills
bun-nextjs
This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.
secondsky/claude-skills
bun-sqlite
Use for bun:sqlite, SQLite operations, prepared statements, transactions, and queries.
secondsky/claude-skills
bun-sveltekit
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs
Didn't find tool you were looking for?