Image optimization

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

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

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.

What its author says it does

Copied from the file, not written here

Image formats, responsive images, lazy loading, and CDN integration.

SKILL.md

1.1 KB, 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