Agent skill · design visual · secondsky
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.
Why this skill is useful
Provides specific code snippets and techniques for optimizing images that improve web performance, which the AI may not generate on its own.
What it needs
Requires sharp installed locally. About 1k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
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 Lazy Loading Build Pipeline (Sharp) 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/image-optimization