Image optimization

Skill a5c-ai/babysitter/library/specializations/web-development/skills/image-optimization

Image formats, responsive images, lazy loading, and CDN integration.From its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill image-optimization

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

SKILL.md

1.1 KB, 194 tokens by cl100k_base, as published. Nobody here has run it

Image Optimization Skill

Expert assistance for image optimization.

Capabilities

Optimize image formats (WebP, AVIF)
Implement responsive images
Configure lazy loading
Set up image CDN
Handle blur placeholders

Next.js Image

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
  placeholder="blur"
  blurDataURL={blurData}
/>

Responsive Images

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="" loading="lazy" />
</picture>

Target Processes

image-optimization
performance-improvement
lcp-optimization

What ships with it: 1 file

321 B alongside SKILL.md

README.md321 B