gw-svelte/docs/webp-conversion.md

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):

# 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:

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.