Image optimization
Skill Dragoon0x/everything-design-taste/skills/image-optimization
A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.
npx -y skills add Dragoon0x/everything-design-taste --skill image-optimizationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Image format selection, responsive images, lazy loading, and image performance optimization.
SKILL.md
1.3 KB, as published. Nobody here has run it
Image Optimization
Format Selection
| Format | Best For | Notes |
|---|---|---|
| WebP | Photos, illustrations | 30% smaller than JPEG, wide support |
| AVIF | Photos (next-gen) | 50% smaller than JPEG, growing support |
| SVG | Icons, logos, simple graphics | Scalable, tiny file size |
| PNG | Screenshots with text, transparency | Lossless, larger files |
| JPEG | Fallback for photos | Universal support |
Responsive Images
<img
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
src="image-800.webp"
alt="Descriptive text"
loading="lazy"
decoding="async"
/>
Performance Rules
- Lazy load below-fold images.
loading="lazy"on img tags. - Size images to display size. Don't serve 4000px images in 400px containers.
- Preload hero images.
<link rel="preload" as="image">for above-fold. - Use CDN. Serve images from edge locations.
- Set explicit dimensions. Prevent layout shift (CLS).