image-optimization
CommunityOptimize images for fast, stunning web visuals.
Software Engineering#CDN#web-performance#lazy-loading#image-optimization#responsive-images#AVIF#WebP
AuthorIgorVaryvoda
Version1.0.0
Installs0
System Documentation
What problem does it solve?
The Image Optimization Skill helps developers deliver fast, visually rich web pages by selecting modern image formats, applying efficient compression, and configuring responsive delivery techniques to reduce payloads without sacrificing perceived quality.
Core Features & Use Cases
- Format selection and quality tuning for JPEG, PNG, WebP, AVIF, and GIF with reliable fallbacks across browsers.
- Responsive images using srcset, sizes, picture, and fetchpriority to optimize LCP and CLS.
- CDN integration, lazy loading, and placeholder strategies (LQIP, blurhash) to improve user experience and startup times.
- Practical use: optimize a hero image for a multi-device landing page to improve LCP while maintaining visual fidelity.
Quick Start
Use the image-optimization skill to generate optimized variants for a sample hero image, producing AVIF/WebP/JPEG formats with fallbacks and responsive sizing.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: image-optimization Download link: https://github.com/IgorVaryvoda/image-optimization-skill/archive/main.zip#image-optimization Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.