Image Optimization
- 595 installs
- 305 repo stars
- Updated March 4, 2026
- aj-geddes/useful-ai-prompts
image-optimization is a Claude Code skill that applies format-specific compression rules and size budgets so site images load fast without visible quality loss for developers who ship production web frontends.
About
image-optimization is a frontend performance skill from aj-geddes/useful-ai-prompts that encodes format-specific compression playbooks for JPEG, PNG, WebP, and SVG assets. It recommends JPEG quality 70–85 for photos (~50–70% size reduction), PNG lossless workflows with PNGQuant or OptiPNG (10–30% reduction), WebP via cwebp for ~25–35% savings over JPEG/PNG with <picture> fallbacks for 90% browser support, and SVG guidance for icons and logos. The skill includes ready-to-run ImageMagick, cwebp, and optipng command examples developers can paste into CI or local optimization scripts. Reach for image-optimization when Lighthouse or Core Web Vitals flag heavy images and you need consistent, format-aware budgets instead of ad-hoc TinyJPEG uploads.
- 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
Image Optimization by the numbers
- 595 all-time installs (skills.sh)
- Ranked #573 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill image-optimizationAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 595 |
|---|---|
| repo stars | ★ 305 |
| Security audit | 3 / 3 scanners passed |
| Last updated | March 4, 2026 |
| Repository | aj-geddes/useful-ai-prompts ↗ |
How do you compress web images without quality loss?
Apply format-specific compression rules and size budgets so site images load fast without visible quality loss.
Who is it for?
Frontend developers tuning production image payloads who want repeatable format rules and shell-ready compression commands.
Skip if: Teams that only need a one-off CDN resize URL and do not maintain a local or CI image optimization pipeline.
When should I use this skill?
Lighthouse, LCP, or bundle audits show oversized JPEG, PNG, WebP, or SVG assets and the user asks for compression budgets or format guidance.
What you get
Optimized image files, format selection notes, and CLI commands for JPEG, PNG, WebP, and SVG pipelines.
- Optimized image files
- Format selection guidance
- Shell compression commands
By the numbers
- Recommends JPEG quality 70–85 for ~50–70% size reduction
- Documents WebP as ~25–35% smaller than JPEG/PNG with ~90% browser support
- Notes PNG lossless compression yields 10–30% reduction
Files
Image Optimization
Table of Contents
Overview
Images typically comprise 50% of page weight. Optimization dramatically improves performance, especially on mobile networks.
When to Use
- Website optimization
- Responsive image implementation
- Performance improvement
- Mobile experience enhancement
- Before deployment
Quick Start
Minimal working example:
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
// ... (see reference guides for full implementation)Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Image Compression & Formats | Image Compression & Formats |
| Responsive Images | Responsive Images |
| Optimization Process | Optimization Process |
| Monitoring & Best Practices | Monitoring & Best Practices |
Best Practices
✅ DO
- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying
❌ DON'T
- Skip testing or validation
- Ignore error handling
- Hard-code configuration values
Image Compression & Formats
Image Compression & Formats
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, backgroundsMonitoring & Best Practices
Monitoring & Best Practices
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 3GOptimization Process
Optimization Process
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 3GResponsive Images
Responsive Images
<!-- 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" />// Component: [Name]
// TODO: Customize for your framework (React, Vue, Svelte, etc.)
import React from 'react';
interface Props {
// TODO: Define props
}
export function ComponentName({ }: Props) {
// TODO: Add state and effects
return (
<div>
{/* TODO: Add component markup */}
</div>
);
}
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kHow it compares
Pick image-optimization when you need format-by-format CLI recipes and quality budgets; use a build-plugin optimizer when you only want zero-config bundler transforms.
FAQ
What JPEG quality should web photos use?
image-optimization recommends JPEG quality 70–85 for photographs, targeting roughly 50–70% file-size reduction via ImageMagick convert or similar tools while keeping complex images visually acceptable on modern displays.
When should developers choose WebP over JPEG?
image-optimization advises WebP for modern browsers (~90% support) when you need about 25–35% better compression than JPEG or PNG, pairing cwebp output with a <picture> element fallback for unsupported clients.
Is Image Optimization safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.