Image optimization

Skill Dragoon0x/everything-design-taste/skills/image-optimization

Image format selection, responsive images, lazy loading, and image performance optimization.From its SKILL.md

Install

npx -y skills add Dragoon0x/everything-design-taste --skill image-optimization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 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.

SKILL.md

1.3 KB, 306 tokens by cl100k_base, 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).

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.