/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.
One skill from claude-skills.
shell
$ npx -y skills add secondsky/claude-skills --skill image-optimization --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/image-optimization
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
Stats
Stars194
Forks29
LanguageTypeScript
LicenseMIT
Ships with claude-skills
SKILL.md
image-optimization.SKILL.md
--- name: image-optimization description: 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. license: MIT --- # 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 ```html <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"
