dragoon0x/everything-design-taste
image-optimization
Image format selection, responsive images, lazy loading, and image performance optimization.
First seen Jul 18, 2026
Installation
$
npx skills add dragoon0x/everything-design-taste --skill image-optimization
SKILL.md
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).
