rtk-ai Image WebP Skill
Ensure all illustrations are WebP format and all <img> tags have proper attributes.
Step 1 — Find non-WebP images
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:
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:
grep -n "<img" src/**/*.astro | grep -v "width" | grep -v "height"
Also check for missing alt attributes:
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