image-optimization

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

509 stars

Best use case

image-optimization is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using image-optimization should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/image-optimization/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/web-development/skills/image-optimization/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/image-optimization/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How image-optimization Compares

Feature / Agent	image-optimization	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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

```tsx
import Image from 'next/image';

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

## Responsive Images

```html
<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

Related Skills

bundle-optimization

509

from a5c-ai/babysitter

Bundle analysis, code splitting, tree shaking, and size optimization.

responsive-image

509

from a5c-ai/babysitter

Generate responsive image sets with srcset, WebP/AVIF conversion, and art direction

tensorrt-optimization

509

from a5c-ai/babysitter

NVIDIA TensorRT model optimization and deployment. Convert models to TensorRT engines, configure optimization profiles and precision modes, apply INT8 calibration, analyze kernel fusion, generate custom plugins, and profile inference performance.

shader-optimization

509

from a5c-ai/babysitter

Shader performance optimization skill for instruction counting, GPU profiling, and rendering efficiency.

mobile-optimization

509

from a5c-ai/babysitter

Mobile GPU optimization skill for thermal management.

asset-optimization

509

from a5c-ai/babysitter

Asset optimization skill for mesh and texture budgets.

synthesis-optimization

509

from a5c-ai/babysitter

Expertise in RTL optimization for FPGA synthesis tools. Analyzes synthesis reports, applies attributes, and guides resource inference for optimal QoR.