# WebP Conversion (C5) — One-time setup

The hero `<picture>` element in `src/lib/components/HeroSection.svelte` now
supports WebP sources. Once you generate the WebP files, add the URL fields
to the hero content block — the markup will start serving WebP automatically
to supporting browsers (every browser currently in use).

## 1. Generate WebP variants

From the project root, with `cwebp` installed (`brew install webp` /
`choco install webp` / `apt install webp`):

```bash
# Mobile hero (already 1536x1024 — optimise + convert)
cwebp -q 82 static/images/maya-mascot.png -o static/images/maya-mascot.webp

# Three new untracked images visible in git status
cwebp -q 82 static/images/happy-dogs-in-travel-ready-suv.jpg -o static/images/happy-dogs-in-travel-ready-suv.webp
cwebp -q 82 static/images/playful-dog-pack-in-park.jpg -o static/images/playful-dog-pack-in-park.webp
cwebp -q 82 static/images/testimonial-freddy-eating-stick-in-park.png -o static/images/testimonial-freddy-eating-stick-in-park.webp
```

Target file sizes:
- Hero (mobile): under 150 KB
- Hero (desktop): under 300 KB
- Testimonials/inline: under 80 KB

## 2. Wire up the WebP source

In `src/lib/content/homepage.ts`, uncomment and set:

```ts
hero: {
  // ...existing fields
  imageWidth: 1536,
  imageHeight: 1024,
  imageWebpUrl: '/images/maya-mascot.webp'
}
```

If you also produce a desktop-specific variant, add `desktopImageUrl` and
`desktopImageWebpUrl`.

## 3. Verify

Open the homepage in Chrome DevTools → Network → filter `Img`. You should
see `maya-mascot.webp` being served with `Type: webp`. The `.png` is the
fallback `<img>` and should only load if WebP is somehow unsupported.

## Why this matters

The codebase ships PNG/JPG hero assets. WebP at quality 82 typically lands
30–50% smaller than the equivalent PNG/JPG with no perceptible quality
difference. For the LCP element on a mobile homepage, that's a 0.5–1.5s
improvement on slow 4G — directly relevant to the `largest-contentful-paint`
Core Web Vital.