Image Optimization
Apply format-specific compression rules and size budgets so site images load fast without visible quality loss.
Overview
Image Optimization is an agent skill most often used in Ship (also Launch SEO, Grow content) that defines compression formats, CLI workflows, and KB budgets for faster web images.
Install
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill image-optimizationWhat is this skill?
- Format matrix for JPEG, PNG, WebP, and SVG with tools and example CLI commands
- Three compression tiers: conservative, moderate, and aggressive with quality ranges
- Performance targets: hero <200KB, thumbnail <30KB, icon <5KB, total images <500KB
- WebP guidance with <picture> fallback for broader browser support
- Checklist covering optimization, WebP fallback, responsive sizes, and Lighthouse audit
- Hero image target <200KB
- Thumbnail target <30KB
- Total images target <500KB
Adoption & trust: 503 installs on skills.sh; 251 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your pages ship heavy unoptimized images and you lack a consistent format and quality playbook.
Who is it for?
Indie sites and SaaS marketing pages where you control build or deploy pipelines and can run ImageMagick, cwebp, optipng, or SVGO.
Skip if: Real-time ML super-resolution pipelines, print production, or teams that rely solely on unmanaged CDN auto-optimization with no local rules.
When should I use this skill?
Optimizing images for web delivery, choosing formats, or hitting performance byte budgets.
What do I get? / Deliverables
Images follow chosen format rules, documented compression levels, and size targets with a checklist ready for Lighthouse verification.
- Optimized image files per format rules
- Documented quality tier per asset class
- Completed optimization checklist
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Ship/perf is the canonical shelf because the skill targets measurable weight limits and tooling before or right after release. Perf subphase fits hero/thumbnail/icon KB targets, WebP fallbacks, and Lighthouse-style audits—not copywriting or distribution.
Where it fits
Re-encode hero JPEGs at quality 75 and add WebP sources before a release perf pass.
Shrink blog thumbnails under 30KB to improve LCP on landing and article templates.
Standardize new tutorial screenshots as optimized PNG with quantize settings from the moderate tier.
How it compares
Structured compression cookbook for builders—not a hosted image CDN product or design mockup generator.
Common Questions / FAQ
Who is image-optimization for?
Solo and indie builders shipping web apps, blogs, or stores who want agent-guided image format and size decisions tied to performance budgets.
When should I use image-optimization?
In Ship when tightening Core Web Vitals before release; in Launch SEO when large hero images hurt LCP; in Grow content when publishing many new media assets.
Is image-optimization safe to install?
Review the Security Audits panel on this Prism page; applying the skill may involve shell image tools on your machine—run only commands you trust in your repo.
SKILL.md
READMESKILL.md - Image Optimization
# Image Compression & Formats ## Image Compression & Formats ```yaml Format Selection: JPEG: Best for: Photographs, complex images Compression: Lossy (quality 70-85) Size: ~50-70% reduction Tools: ImageMagick, TinyJPEG Command: convert image.jpg -quality 75 optimized.jpg PNG: Best for: Icons, screenshots, transparent images Compression: Lossless Size: 10-30% reduction Tools: PNGQuant, OptiPNG Command: optipng -o3 image.png WebP: Best for: Modern browsers (90% support) Compression: 25-35% better than JPEG/PNG Fallback: Use <picture> element Tools: cwebp Command: cwebp -q 75 image.jpg -o image.webp SVG: Best for: Icons, logos, simple graphics Compression: Minify XML Scalable: Works at any size Tools: SVGO Command: svgo image.svg --output optimized.svg --- Compression Levels: Conservative (95% quality): JPEG: 85-90 quality PNG: Lossless Use: High-value images Moderate (90% quality): JPEG: 75-80 quality PNG: Quantized to 256 colors Use: General images Aggressive (80% quality): JPEG: 60-70 quality PNG: Reduced colors Use: Thumbnails, backgrounds ``` # Monitoring & Best Practices ## Monitoring & Best Practices ```yaml Performance Targets: Hero Image: <200KB Thumbnail: <30KB Icon: <5KB Total images: <500KB Target gzipped: <300KB Tools: - ImageOptim (Mac) - ImageMagick (CLI) - TinyJPEG/TinyPNG (web) - Squoosh (web) - Lighthouse (audit) Checklist: [ ] All images optimized [ ] WebP with fallback [ ] Responsive srcset [ ] Lazy loading implemented [ ] Correct format per image [ ] File size <100KB each [ ] Benchmarks established [ ] Monitoring in place [ ] Documented process Tips: - Optimize before uploading - Use CDN with image optimization - Consider Image CDN (Imgix, Cloudinary) - Batch process during build - Monitor image additions - Test real devices on 3G ``` # Optimization Process ## Optimization Process ```yaml Workflow: 1. Preparation - Export at correct size (don't scale in HTML) - Use appropriate format - Batch process similar images 2. Compression - Lossy: TinyJPEG/TinyPNG - Lossless: ImageMagick - Target: <100KB for main images - Thumbnails: <20KB 3. Format Conversion - WebP with JPEG fallback - Consider PNG for transparency - SVG for scalable graphics 4. Implementation - Use srcset for responsive - Lazy load below-fold - Optimize critical images first - Monitor file sizes in CI/CD 5. Validation - Check file sizes in DevTools - Test on slow networks - Verify quality acceptable - Measure performance impact --- Quick Wins: Remove EXIF data (saves 20-50KB): identify -verbose image.jpg | grep -i exif convert image.jpg -strip image-clean.jpg Convert to WebP (25-35% smaller): cwebp -q 75 *.jpg Batch compress with ImageMagick: mogrify -quality 75 -resize 1920x1080 *.jpg Expected Results: - Homepage: 850KB → 300KB images - Performance: 3s → 1.5s load time - Mobile: Significant improvement on 3G ``` # Responsive Images ## Responsive Images ```html <!-- Responsive image techniques --> <!-- srcset: Let browser choose --> <img src="image.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes=" (max-width: 480px) 100vw, (max-width: 768px) 90vw, 80vw " alt="Description" /> <!-- picture: Format selection --> <picture> <source srcset="image.webp" type="image/webp" /> <source srcset="image.jpg" type="image/jpeg" /> <img src="image.jpg" alt="Description" /> </picture> <!-- Lazy loading --> <img src="placeholder.jpg" loading="lazy" alt="Description" /> ``` --- name: image-optimization description: > Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading. --- # Image Optimization ## Table of Contents - [Overview](#overview) - [When to Use](#when-to-use) - [Quick Start](#quick-start) - [Reference Guides](#reference-gui