# Image Webp

> Audit and convert images to WebP format. Checks public/assets/ for PNG/JPG files, verifies <img> tags have width/height, and generates cwebp conversion commands.

- Skill: `rtk-ai/image-webp` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rtk-ai/image-webp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rtk-ai/image-webp/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Security
- Author: rtk-ai (https://skillmd.com/u/rtk-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rtk-ai/image-webp

---


# Image WebP Skill

Ensure all illustrations are WebP format and all `<img>` tags have proper attributes.

## Step 1 — Find non-WebP images

```bash
find public/assets/illustrations/ -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" 2>/dev/null
```

For each file found:
- Is it an OG image (og-*.png, og-image.*)? → **Keep as PNG** (Twitter/X requirement)
- Otherwise → **Convert to WebP**

## Step 2 — Generate conversion commands

For each non-OG image that needs conversion:
```bash
cwebp -q 85 -preset photo input.jpg -o output.webp
```

Check if `cwebp` is installed: `which cwebp || brew install webp`

## Step 3 — Check img attributes

Grep all `.astro` files for `<img` tags missing `width` or `height`:
```bash
grep -n "<img" src/**/*.astro | grep -v "width" | grep -v "height"
```

Also check for missing `alt` attributes:
```bash
grep -n "<img" src/**/*.astro | grep -v 'alt='
```

## Step 4 — Check Astro Image component usage

Astro has `<Image>` from `astro:assets` which handles optimization automatically.
If raw `<img>` tags exist for static assets, suggest migrating to `<Image>` component.

## Output Format

```
Non-WebP images found:
  public/assets/illustrations/hero-diagram.png (45KB) → Convert
  public/assets/og-image.png (120KB) → KEEP (OG image)

Conversion commands:
  cwebp -q 85 -preset photo public/assets/illustrations/hero-diagram.png -o public/assets/illustrations/hero-diagram.webp

img tags missing width/height:
  src/pages/index.astro:142 — <img src="/assets/diagram.webp" alt="..."> → Add width="800" height="400"

img tags missing alt:
  src/components/landing/Hero.astro:23 — <img src="..."> → Add descriptive alt text
```