aj-geddes/image-optimization
skills/image-optimization/SKILL.md
Optimize images for web to reduce file size without sacrificing quality. Use compression, modern formats, and responsive techniques for faster loading.
$ install --global
skillsauthnpx skillsauth add aj-geddes/useful-ai-prompts image-optimizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 2, 2026, 2:27 AM52.1s6 files scanned
SKILL.md
- name:
- image-optimization
- description:
- >
Image Optimization
Table of Contents
- Overview
- When to Use
- Quick Start
- Reference Guides
- Best Practices
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
Related Skills
aj-geddes/zero-trust-architecture
development
VerifiedTrustedCommunity
Implement Zero Trust security model with identity verification, microsegmentation, least privilege access, and continuous monitoring. Use when building secure cloud-native applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/xss-prevention
development
VerifiedTrustedCommunity
Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/wireframe-prototyping
tools
VerifiedTrustedCommunity
Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/websocket-implementation
development
VerifiedTrustedCommunity
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.
154SKILL.mdUpdated Apr 1, 2026