Image Optimization
- 475 installs
- 202 repo stars
- Updated August 4, 2026
- secondsky/claude-skills
image-optimization is a Claude Code skill that optimizes web images using modern formats, responsive techniques, and lazy loading strategies to improve page load times before production deployment.
About
image-optimization is a Claude Code skill (MIT) for frontend developers preparing assets for production. The skill guides format selection across JPEG (50–70% lossy reduction for photos), PNG (lossless, 10–30% for icons), WebP (25–35% better than JPEG), AVIF (up to 50% better than JPEG), and SVG for vector logos. Developers reach for image-optimization when Core Web Vitals scores lag, responsive srcset is missing, or lazy loading is not wired. The skill covers compression tradeoffs, picture elements, and deployment-ready asset pipelines so pages load faster without visible quality loss.
- image-optimization
Image Optimization by the numbers
- 475 all-time installs (skills.sh)
- +22 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #874 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/secondsky/claude-skills --skill image-optimizationAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 475 |
|---|---|
| repo stars | ★ 202 |
| Last updated | August 4, 2026 |
| Repository | secondsky/claude-skills ↗ |
How do you optimize images for web performance?
Use image-optimization for development tasks
Who is it for?
Frontend developers improving LCP and page weight with modern image formats before a production deploy.
Skip if: Teams optimizing video streams, server-side-only image pipelines without HTML delivery, or print asset workflows.
When should I use this skill?
A developer needs faster page loads, responsive images, WebP/AVIF conversion, or lazy loading implementation.
What you get
Optimized image assets in modern formats, responsive srcset markup, and lazy-loading configuration.
- optimized image assets
- responsive img markup
- lazy-load config
By the numbers
- JPEG achieves 50–70% lossy compression reduction for photos
- WebP delivers 25–35% better compression than JPEG
- AVIF delivers up to 50% better compression than JPEG
Files
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
Related skills
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kFAQ
Which image formats does image-optimization recommend?
image-optimization maps JPEG for photos (50–70% reduction), PNG for transparency, WebP (25–35% better than JPEG), AVIF (up to 50% better than JPEG), and SVG for vector logos and icons.
Does image-optimization cover lazy loading?
image-optimization includes lazy loading strategies alongside responsive srcset and modern format selection. The skill targets production deployment where page load time and LCP scores need improvement.